Aku udah capek Keliling mencari widget Top Commentator yang memakai Avatar, ketemu sih ketemu tapi Top komentator yang memakai avatar ini Javascriptnya banyak banget, karena pemanggilan kodenya menggunakan url ini. ( MS Postilas )
http://namablog.blogspot.com/feeds/comments/default
Banyak blog yang membahas widget top komentator tapi rata-rata menggunakan cara tersebut, aku pikir lagi kode tersebut sangat berat karena banyak sekali pemanggilan kodenya, ada cara lain yang menggunakan url yahoo pipes ( Blogger Sentral )
http://pipes.yahoo.com/pipes/pipe.run?YourBlogUrl=http://zhinto.blogspot.com&ExcludedNick1=Zhinto&ShowHowMany=5&_callback=topkomentar&_id=23022d7836bf2dd3c10a329feb9be26a&_render=json
Menurutku trik yang digunakan Blogger Sentral ini, agak ringan dibanding trik Milik Ms postilas, Dan kali ini aku memanfaatkan Trik Milik Blogger Sentral yang sudah aku modifikasi, sebelumnya terima kasih buat temen2 diGroup javascript indonesia yang udah membantu aku mengatasi masalah pemanggilan JSON yang menggunakan tanda ":" (colon) setelah mengerti akhirnya beres juga widget Top Commentator with avatar yang menurutku lebih ringan dikit. Silahkan tambah Gadget HTML/Javascript dan masukan semua kode dibawah ini.
<style>
#tcom {
list-style-type: none;
margin: 0;
padding: 0;
background: #0183DB;
font: normal 12px/20px serif;
}
#tcom li {
background: #C6C3FF;
border-bottom: 1px solid #E4E5E7;
margin: 0 0 1px 0;
overflow: hidden;
padding: 5px;
}
#tcom li:last-child {
margin: 0;
}
#tcom .img {
float: left;
margin: 0 10px 0 0;
width: 60px;
height: 59px;
overflow: hidden;
}
#tcom .img img {
vertical-align: middle;
height: 100%:
width: 100%
}
</style>
<script type="text/javascript">
//Top Komentator By Blogger sentral @-www.bloggersentral.com
// Modified By Zhinto @-http://zhinto.blogspot.com/
function topkomentar(feed) {
document.write('<ul id="tcom">');
var i;
for (i = 0; i < feed.count; i++) {
var d = feed.value.items[i];
var item;
var href = d.link,
itez = d.author['gd:image'].src.replace(/\/s(512|220)/g,"/s60"),
total = d.title.replace(/([^0-9])/g, ""),
nama = d.author.name;
if(feed.value.items[i].link == "") {
item ="<li>" + feed.value.items[i].title + "</li>";
} else {
item = "<li>" + "<span class='img'><img src='" + itez + "'/></span>" + "<div class='nama'>"+nama+"</div>" + "Website: <a href=" + href + " target='_blank'>Kunjungi</a>" + "<div class='total'>Total Komen : " + total +"</div>" + "</li>";
document.write(item);
}
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?YourBlogUrl=http://namabloganda.blogspot.com&ExcludedNick1=Zhinto&ShowHowMany=5&_callback=topkomentar&_id=23022d7836bf2dd3c10a329feb9be26a&_render=json"
type="text/javascript"></script>Silahkan Ganti:
1. http://namabloganda.blogspot.com ( ganti dengan URL blog anda )
2. Zhinto ( ganti dengan nama profil blogger anda, ini bertujuan agar komentar kita tidak diindeks )
3. 5 ( ganti dengan jumlah komentar yang ingin ditampilkan )
Oke, setelah itu simpan.
Untuk masalah tampilan anda bisa sesuaikan sendiri pada cssnya.
