Widget ini sebenarnya dapat kita peroleh melalui widget bawaan Blogger namun ini bisa menjadikan satu nilai plus untuk mempercantik sidebar anda. Sidebar ini digunakan untuk menampilkan komentar dari para pembaca blog kita. Sidebar komentar ini yaitu bisa menampilkan nama user yang komentar dan juga isi dari komentar tersebut, kita bisa cepat mengetahui siapa blogger visitor yang sudah memberi komentar. Widget ini masih melibatkan bahasa pemrograman JSON yang memanfaatkan Feed dari blogger sehingga proses memuatannya (loading) lebih cepat dan ringan. Mau mencoba? Silahkan lanjutkan !!
Integrasi JSON Sidebar Comments Pada Template
Langkah 1Login 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 {
background-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
}
Langkah 5Cari kode dibawah ini:
</head>Langkah 6
Masukan (copy paste) kode JavaScript dibawah ini diatas kode pada langkah 5:
<script type='text/javascript'>
//<![CDATA[
/*
Beauty JSON Commentator Sidebar 1.0 (May 29, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
var jmlkomentar = 20;
var jmlkarakter = 80;
function tampilkankomentar(json) {
var entry, urlkomentar, isikomentar, lihatkomentar;
for (var i = 0; i < jmlkomentar; i++) {
entry = json.feed.entry[i];
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
urlkomentar = entry.link[k].href;
break
}
}
urlkomentar = urlkomentar.replace("#", "#comment-");
if ("content" in entry) {
isikomentar = entry.content.$t
} else if ("summary" in entry) {
isikomentar = entry.summary.$t
} else {
isikomentar = ""
}
var re = /<\S[^>]*>/g;
isikomentar = isikomentar.replace(re, "");
if (isikomentar.length > jmlkarakter) {
isikomentar = isikomentar.substring(0, jmlkarakter) + "…"
}
lihatkomentar = "<li>";
lihatkomentar += "<span class='komen'></span><b>" + entry.author[0].name.$t + "</b>";
lihatkomentar += "<a rel='nofollow' href='" + urlkomentar + "'>" + isikomentar + "</a>";
lihatkomentar += "</li>";
document.write(lihatkomentar)
}
}
//]]>
</script>
Langkah 7"SIMPAN TEMPLATE" dan lanjutkan...
Integrasi JSON Sidebar Comments pada Gadget
Langkah 8"Tambah Gadget" dengan tipe "HTML/JavaScript"
Langkah 9
Masukan (copy paste) kode dibawah ini didalam konten dan jangan lupa beri Judul Gadget:
<div id="komentar"> <ul> <script src="/feeds/comments/default?alt=json-in-script&callback=tampilkankomentar"></script> </ul> </div>Langkah 10
"SIMPAN" Gadget dan preview blog anda...
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
Selamat mencoba dan semoga berhasil... Happy Blogging :)
