Percantik Sidebar Komentar Pada Blogger

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 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:

<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 9

Masukan (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?

source : http://www.jasa-pembuatan-blog.com