Memasang Widget Post Berdasarkan Komentar Terbanyak

Memasang Widget Post Berdasarkan Komentar Terbanyak - Widget post yang akan saya bagikan adalah widget post yang menampilkan komentar pada posting paling banyak, jika suatu posting memiliki komentar terbanyak maka akan berada di posisi paling atas dan berurutan kebawah.

Widget post berdasarkan komentar terbanyak ini hanya widget tambahan saja, bagi sobat yang ingin memasangnya, silahkan ikuti langkah-langkahnya:

Cara Memasang Widget Post Berdasarkan Komentar Terbanyak

Buka blogger.com -> Tata  letak -> Tambahkan widget -> pilih HTML/Javascript
Pastekan kode dibawah ini di kolom HTML/Javascript

<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;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:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #3cc091;border:1px solid #e6e6e6;transition:all .6s;}
#most-comments ul li:hover{box-shadow:inset 450px 0 #3cc091;}
#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s;}
#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff;}
.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s;}
#most-comments ul li:hover .count-most{background-color:#3cc091;}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="www.dandidesain.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>

Keterangan:
Ganti url www.dandidesain.com dengan url blog sobat
var numPosts=10 adalah jumlah posting berdasarkan komentar terbanyak yang ingi ditampilkan
Pada css box-shadow: inset 450px itu ukuran lebar pada widget post ketika widget post di hover atau di sentuh.
Simpan widget, selesai.

Semoga bermanfaat.

Tutorial Blogger, Widget