Majalah Blog bikin Most Commented Article

Majalah Blog kali ini ingin berbagi turotial tentang cara membuat Most Commented Article yang akan menginformasikan kepada pengunjung atau visitor tentang artikel-artikel blog kita yang paling banyak mendapat komentar. Dengan mengetahui jumlah komentar dalam sebuah artikel, paling tidak kita dapat mengetahui artikel-artikel mana yang paling banyak diminati oleh pengunjung atau visitor. Hal ini akan memacu kita untuk membuat artikel-artikel lain yang lebih bagus atau lebih berkualitas, minimal memiliki kualitas yang sama.

Pertanyaan yang mendasar adalah : Bagaimana sebenarnya bentuk atau model dari widget Most Commented Article ini ? Bentuknya cukup sederhana namun memiliki kualitas yang cukup, karena masing-masing judul artikel akan bergerak dan berubah warna menjadi merah saat disorot dengan mouse. Screen-shootnya seperti gambar di bawah ini.

Sekedar tambahan pengetahuan, widget Most Commented Article ini pada satu sisi dapat kita maksimalkan untuk membantu meningkatkan pageviews blog karena apa ? Dengan semakin banyak komentar yang melekat pada sebuah artikel blog, maka hal ini paling tidak akan membuat penasaran para pengunjung atau visitor untuk melihat atau membaca seperti apa sebenarnya pokok bahasan dari artikel tersebut. Secara tidak langsung kenyataan ini akan membuat penasaran pengunjung atau visitor untuk mengunjungi halaman artikel tersebut. Bener gak sih prediksi aku ini  ................  ?

Oke, sekarang kita mulai pada pembahasan untuk membuatnya. Langkah pertama tambahkan widget HTML pada blog yang akan kita pasang widget ini, berikutnya copykan rangkaian script di bawah ini ke dalamnya.

Kode Script ? :

<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.bloggingblog67.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://caragampang21.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>

Lakukan perubahan pada alamat url yang berwarna merah tebal, sesuaikan dengan alamat url blog yang anda miliki, angka 5 menunjukkan jumlah artikel blog yang akan ditampilan dalam widget ini. Langkah terakhirnya, simpan template anda dan lihat hasilnya.

Selamat mencoba, semoga berhasil, dan bilamana anda mengalami kesulitan, silahkan menuliskannya pada kotak komentar di bawah ini.