Disqus Top Commenters Widget for Blogger

Masih seputar pembahasan disqus, kali ini akan saya share Cara menambahkan widget top commentator. Widget ini bisa saja menjadi pemicu pengunjung untuk lebih rajin berkomentar di Blog kita.

Untuk CSS saya ambil dari Disqus Recent Comment for Blogger milik Kang +Adhy Suryadi (nyhunkeun widi kang.. hehhe). Jadi kalau sobat sudah menggunakan widget milik kang adhy, tinggal gunakan scriptnya saja.

Syarat utamanya, tentunya template sobat  harus sudah ada framework jQuery seperti ini

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Kemudian, buat widget baru dan simpan kode ini (jangan lupa edit USERNAME) dengan username blog sobat :

<style scoped="scoped" type="text/css">
#topcommenters{display:block;width:100%;margin:0 auto;padding:0 10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto}
.dsq-widget ul.dsq-widget-list{padding:0;margin:0;text-align:left}
img.dsq-widget-avatar{margin:3px 10px 7px 0!important;width:58px!important;height:58px!important;padding:0!important;float:left;border-radius:3px!important}
li.dsq-widget-item{margin:0!important;padding:6px 0 4px!important;list-style-type:none;clear:both;border-bottom:1px solid #ddd}
li.dsq-widget-item:last-child{border-bottom:none}
a.dsq-widget-user{font-weight:700;display:block!important;margin-bottom:5px}
</style>
<div id="topcommenters" class="dsq-widget">
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://blogkangismet.disqus.com/top_commenters_widget.js?num_items=5&hide_mods=1&hide_avatars=0&avatar_size=32\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#topcommenters a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>

Kostumisasi

• blogkangismet : ganti username blog sobat
• num_items : jumlah top komentator
• hide_mods : Menyembunyikan komentar Moderator (1 sembunyikan, 0 munculkan)
• hide_avatars : Menyembunyikan avatar (1 sembunyikan, 0 munculkan)
• avatar_size : ukuran avatar

View Demo

Bagi sobat yang membutuhkan script saja tanpa CSS, ini HTML plus Script

<div id="topcommenters" class="dsq-widget">
<h2 class="dsq-widget-title">Top Commenters</h2>
<script type="text/javascript" src="http://blogkangismet.disqus.com/top_commenters_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32"></script>
</div>

Semoga bermanfaat..