EDIT WIDGET KOMENTAR BLOG


Widget Komentar (JSON) adalah widget yang digunakan untuk menampilkan daftar komentar dari pengunjung blog. widget ini bisa kita dapatkan dari blogger namun bisa kita percantik menjadi lebih eye catching sehingga sidebar menjadi lebih menarik. Kelebihan dari widget ini adalah widget ini dapat menampilkan nama user dan isi komentarnya sehingga kita bisa mengetahui siapa saja pengunjung blog yang telah memberi komentar pada blog kita. Selain itu, Bahasa pemrograman yang digunakan JSON memanfaatkan feed dari blogger sehingga proses pemanggilannya lebih cepat dan ringan.

tutorial JSON Sidebar Comments Pada Template:

Langkah 1

Login ke Blogger

Langkah 2
Masuk ke “Rancangan – Edit HTML”
Langkah 3
Cari kode dibawah ini:

    ]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

/* Sidebar Komentar JSON */
#komentar {
background: #3eb5da; //warna dasar
margin: 0;
padding: 0;
border: 1px solid #0971C8; //garis pinggir kotak gadget komentar
}
#komentar ul {
margin: 0;
padding: 0; //jarak ke pinggir kotak gadget komentar
}
#komentar ul li: first-child {
border-top: 0 none aqua;
}
#komentar ul li {
border-top: 1px solid #CCC; //garis sekat atas
border-bottom: 1px solid #0971C8; //garis sekat bawah
padding: 2px 0;
list-style: none;
}
#komentar ul li: last-child {
border-bottom: 0 none aqua;
}
#komentar ul li span {
ackground-position: 2px 2px;
float: left;
height: 16px;
margin-right: 5px;
width: 16px;
}
#komentar ul li b {
color: #ffffff; //warna huruf nama komentator
text-shadow: -1px -1px 1px #3196BA;
}
#komentar ul li: hover {
background-color: #CCC; //warna latar ketika mouse diatasnya
}
#komentar a, #komentar a: link, #komentar a: visited {
clear: both;
color: #FFF; //warna huruf isi komentar
display: block;
padding-left: 20px;
text-decoration: none;
}
#komentar a: hover {
color: #333; //warna huruf ketika mouse diatasnya
}
.komen {
background: transparent url(https: //lh5.googleusercontent.com/_xcD4JK_dIjU/TcA0b1eB4sI/AAAAAAAAFGQ/MlIzrpydae0/s800/top_rss.png) no-repeat 0 0; //icon komentar
50 }

Langkah 5
Cari kode dibawah ini:

   </head>

Langkah 6
Masukan (copy paste) kode JavaScript dibawah ini diatas kode pada langkah 5:

//]*>/g;
isikomentar = isikomentar.replace(re, “”);
if (isikomentar.length > jmlkarakter) {
isikomentar = isikomentar.substring(0, jmlkarakter) + “â�¦”
}
lihatkomentar = “

  • “;
    lihatkomentar += “” + entry.author[0].name.$t + ““;
    lihatkomentar += “” + isikomentar + ““;
    lihatkomentar += “
  • “;
    document.write(lihatkomentar)
    }
    }
    //]]>

    Langkah 7
    “SIMPAN TEMPLATE” dan lanjutkan.
    Tutorial JSON Sidebar Comments pada Gadget

    Langkah 8
    “Tambah Gadget” dengan tipe “HTML/JavaScript”

    Langkah 9
    Masukan (copy paste) kode dibawah ini di dalam konten dan jangan lupa beri Judul Gadget:

    Langkah 10
    “SIMPAN” Gadget dan preview.

    Keterangan:

    var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar yang ingin ditampilkan
    var jmlkarakter = 80; Ubah nilai 80 untuk menentukan jumlah karakter isi komentar yang ingin ditampilkan

     

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s