Percantik Sidebar Komentar (JSON)

Bismillah. Disela-sela tahap penyembuhan dari sakit yang cukup lama dan disela-sela kesibukan dalam proses penyusunan buku, Alhamdulillah satu widget selesai dikembangkan. Widget ini sebenarnya bisa kita peroleh melalui widget bawaan Blogger namun bagi mereka yang suka utak-atik hal ini bisa menjadikan satu nilai plus untuk mempercantik sidebar anda. Sidebar ini digunakan untuk menampilkan komentar dari para pembaca blog kita. Yang menarik dari sidebar komentar ini yaitu bisa menampilkan nama user yang memberi komentar dan juga isi dari komentar tersebut, sehingga kita bisa dengan cepat menyetahui siapa sahabat blogger yang sudah memberi komentar. Widget ini masih melibatkan bahasa pemrograman JSON yang memanfaatkan Feed dari blogger sehingga proses pemanggilan (loading) lebih cepat dan ringan. Mau mencoba? Silahkan lanjutkan membaca jika malas jangan di tutup blog ini cari lagi artikel lain mungkin anda menemukan sesuatu yang menarik... (agak ngelantur)

Integrasi 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 {
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 5
Cari 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

Bagaimana menurut anda? Cantik bukan? Selamat mencoba dan semoga berhasil... Happy Blogging :)

Bloghack Layout Widget