Memasang Widget Most Comments Postingan di Blogger - Kali ini saya akan berbagi widget yang berfungsi menampilkan jumlah komentar pada postingan blogger dalam bentuk widget di sidebar blog.
Dalam widget ini jika sebuah artikel memiliki jumlah komentar terbanyak maka posisi artikel berada di paling atas dengan jumlah komentarnya. Cara kerjanya hampir sama dengan widget popular post yang memunculkan daftar teratas dari artikel yang paling banyak dilihat.
Ok langsung saja bagi yang tertarik dengan widget yang menarik ini dan ingin langsung mencobanya, silakan sobat salin semua kode di bawah ini ke dalam widget baru.
Cara Memasang Widget Most Comments Postingan di Blogger
Buka Blogger, lalu buka menu Tata letak, setelah itu Klik tambahkan gadget dan tambahkan HTML/JavaScript, kemudian salin semua kode di bawah ini dan letakkan di dalam widget.
<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments ul,#most-comments li,#most-comments ul li{margin:0;list-style:none;color:#999;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px;}
#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:10px 50px 10px 5px;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px dotted #eee;transition:all .6s;}
#most-comments ul li:hover{box-shadow:inset 310px 0 #f24a4a;border-radius:2px;}
#most-comments ul li a{color:#243140;text-decoration:none;transition:all .3s;}
#most-comments ul li a:hover{color:#fff;}
#most-comments ul li:hover a{color:#fff;}
.count-most{position:absolute;right:0;top:0;width:30px;height:20px;margin:0;padding:5px 0 0 0;margin:5px 0 3px 0;border-radius:3px;background:#f4f4f4;color:#999!important;text-align:center;transition:all .3s;}
#most-comments ul li:hover .count-most{background:none;color:#fff!important;}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="www.urlsobat.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>Ganti kode "var numPosts=10" dengan jumlah post yang ingin ditampilkan, dan "www.urlsobat.com" dengan url blog sobat.
Selanjutnya Simpan Widget dan lihat hasilnya.
Demikian tutorial kali ini, Selamat mencoba dan semoga bermanfaat.
