Percantik Sidebar Komentar pada blogger, 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 2Masuk ke "Rancangan - Edit HTML"
Langkah 3Cari kode dibawah ini:
]]></b:skin>
Langkah 4Masukan (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 6Masukan (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.
Tutorial JSON Sidebar Comments pada Gadget
Langkah 8"Tambah Gadget" dengan tipe "HTML/JavaScript"
Langkah 9Masukan (copy paste) kode dibawah ini di dalam 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
Bagaimana? Mantap bukan??
