Blog Personal tentang tips Blogging dan Internet

Membuat Widget Most Commented Untuk Blogger

Most Commented
Widget Most Commented adalah widget yang menampilkan daftar artikel yang paling banyak di komentari dari yang terbanyak hingga terkecil. Widget ini sama seperti sebelumnya yaitu memanfaatkan JSON Blogger, widget yang pernah Saya bagikan antara lain Widget Recent Posts dan Widget Random Posts.

Sama seperti sebelumnya yang ditampilkan pada widget ini hanya menampilkan judul dari artikel saja, tapi disertai dengan jumlah komentar pada artikel tersebut.

Cara Memasang Widget Most Commented Untuk Blogger

Silakan salin dan simpan kode dibawah ini pada widget di blog Anda, gunakan HTML/JavaScript
<style type="text/css" scoped>
#most-commented ul,#most-commented li{margin:0;padding:0;list-style:none;color:black;font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-weight:bold;font-size:14px}
#most-commented ul li{position:relative;overflow:hidden;background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #f5edf5 100%);border:1px solid #DFDFDF;margin:0 0 10px 0!important;padding:5px 5px 5px 45px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#most-commented ul li a{color:#666;text-shadow:0px 1px 0px #fff;font-weight:bold;text-decoration:none;}
#most-commented ul li:hover{background: #F9F9F9;}
.bubble-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:5px 0;background-color:#333;color:#fff!important;text-align:center;}
</style>
<div id="most-commented"></div>
<script type"text/javascript">
//<![CDATA[
// Most Commented Widget For Blogger by Kang Mousir
// http://gplus.to/mousir - http://kang-mousir.blogspot.com
var numPosts=10;//Jumlah artikel yang ingin ditampilkan
var homePage="kang-mousir.blogspot.com";//URL blog
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-commented"><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="bubble-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>
    

Pengaturan

IconTeks
var homePageIsi dengan URL blog Anda
var numPostsIsi dengan jumlah artikel yang ingin ditampilkan
Dengan adanya widget ini akan memberitahukan kepada pengunjung artikel mana yang paling banyak dibahas dan paling banyak dikomentari ;)

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

11 Komentar untuk "Membuat Widget Most Commented Untuk Blogger"

Irfan Syahputra

Sebelumnya setau saya hanya ada widget most user commented yang ada, ternyata ada juga widget most commentednya :)

Kang Mousir

Ini widget sudah lama ada, tapi saya rubah stylenya agar lebih keren :D

ABDI NEGARA

Kang Mousir memang tiada duanya :D

Borgop Similitinding

Yang ini berhasil kang, tp yg disini "Cara Memasang Widget Recent Comments Untuk Blogger" tdk brhasil...huhuhu

Kang Mousir

Ayo coba lagi pasti berhasil kok :D

Khizbulloh Huda

kang itu gambarnya bikin pake photo scape ya? hehe... Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.

angkisland

wah mantap bermanfaat terima kasih kang

Daniel Nagata

Bisa juga ini diterapkan.....semakin memperkaya warna blog. Mohon ijin buat masang di blog ane dan terima kasih atas sharingnya. Semoga blog makin rame

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d