Membuat widget Artikel Terkomentari

Blog Blogging kali ini akan berbagi tips-trik tentang membuat widget Artikel Terkomentari yang pada dasarnya merupakan sebuah widget blog berisikan tentang informasi artikel-artikel blog yang telah mendapatkan komentar dari pengunjung berikut dengan jumlah komentar yang ada pada artikel tersebut. Widget ini cukup membantu pemilik blog untuk mengetahui sejauh mana perkembangan blog yang dimilikinya, khususnya berkaitan dengan perkembangan artikel-artikel blog yang telah ditulisnya.

Widget Artikel Terkomentari ini cukup bagus karena dapat berubah warna saat tersentuh oleh mouse komputer. Conatoh aktifnya dapat anda lihat pada bagian sidebar Blog Blogging ini. Sekali lagi, pemakaian widget ini sangat baik untuk memantau perkembangan artikel-artikel blog yang ada, khususnya berkaitan dengan artikel-artikel mana yang paling diminati oleh para pengunjung blog.

Cara pembuatan widget Artikel Terkomentari ini tidaklah terlalu sulit, cukup anda menambahkan widget HTML/Javascript pada bagian sidebar atau footer blog anda, dan kemudian copykan rangkaian script di bawah ini ke dalamnya :

<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 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#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:#fc4f3f}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    var numPosts=5;
    var homePage="www.blog67blogging.blogspot.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://blog67blogging.blogspot.com/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>

Selanjutnya gantilah alamat url yang tercetak tebal dengan alamat url web atau blog anda, simpan widget anda, dan kemudian tinggal anda lihat hasilnya.