Cara Membuat Widget Disqus Top Komentar

Hai Sobat, kali ini saya akan share " Cara Membuat Widget Disqus Top Komentar ". Cara ini masih di sebut sangat muda, karena hanya beberapa blog saja yang mempunyai tutorial seperti ini
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Widget Disqus Top Komentar

Widget Disqus Dengan CSS

1. Masuk Ke Beranda Blogger > Template > Edit HTML

2. Cari Kode </head> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F

3. Masukkan Kode Di Bawah Ini Di Atas Kode </head>

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

Hapus Kode Di Atas Jika Sudah Mempunyai
4. Klik Simpan
5. Kemudian Masuk Ke Tata Letak > Tambah Widget > HTML / Javascript
6. Masukkan Kode Di Bawah Ini Ke Dalam Kotak Yang Sudah Di Sediakan

<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://cak-yit.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>

Anda Dapat Mengganti Kode Yang Di Cetak Tebal Berwarna Merah Dengan URL Disqus Anda Sendiri
Anda Dapa Mengganti Kode Yang Di Cetak Tebal Berwarna Biru Sesuai Keinginan Anda

Penjelasan Kode Yang Di Cetak Tebal Berwarna Biru :
-.Num_Items = Jumlah Komentar
- Hide_Mods = Menyembunyikan Komentar Moderator
- Hide_Avatars = Menyembunyikan Avatar
- Avatar_Size = Ukuran / Besar Avatar

7. Klik Publikasikan

Widget Disqus Tanpa CSS

1. Masuk Ke Beranda Blogger > Tata Letak > Tambah Widget > HTML / Javascript

2. Masukkan Kode Di Bawah Ini Ke Dalam Kotak Yang Sudah Disediakan

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

3. Klik Simpan