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
- Login ke Blogger
- Masuk ke "Rancangan - Edit HTML"
- Cari kode dibawah ini:
]]></b:skin>
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 }
5. Setelah itu, Cari kode dibawah ini:
</head>
6. Lalu 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>
7. "SIMPAN TEMPLATE" dan lanjutkan.
Tutorial JSON Sidebar Comments pada Gadget
8. "Tambah Gadget" dengan tipe "HTML/JavaScript"
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>
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
Mohon dengan sangat untuk berkomentar dan saran demi kemajuan bersama,, beri kritik yang bermanfaat dan jangan lupa join blog ini..!
oke??? terima kasih :) ConversionConversion EmoticonEmoticon