Cara Membuat Top Disqus Comentators For Blogger Dengan Efek Show Hide

Sistem komentar disqus banyak menjadi pilihan kaum blogger termasuk saya karena selain tampilan yang elegan dan minimalis, disqus juga memiliki fitur yang tak kalah bagus dengan sistem komentar lainya, seperti recent comment dan top commentators. Top disqus commentators ini biasa kita lihat di dashboard sendiri, namun ternyata bisa di pasang di blog juga.

Terinspirasi dari blog kompiajaib.com yang saat ini ada tombol untuk menampilkan top disqus commentators ini, hanya saja mas adhy menyimpannya di halaman statis. Itu membuat saya mulai mengobok-obok browser, kali aja ada script untuk menampilkannya di blog. Akhirnya saya menemukan script ini di blog.kangismet.net untuk dipasang di sidebar sebagai widget top disqus commentators.

Akhirnya saya mencoba berinovasi untuk menampilkannya diatas kolom komentar dengan efek show hide supaya tidak mengganggu ruang seperti yang anda lihat pada gambar animasi gif diatas.

Jika anda tertarik untuk memasang top disqus commentators widget diatas kolom komentar sebaiknya ikuti langkah berikut ini: (Sebelumnya pastikan blog anda sudah terpasang jquery library dan font awesome)

1. Simpan kode dibawah ini diatas </head>

<style type='text/css'>

/*<![CDATA[*/

#topcomment{display:block;width:100%;margin:0 auto;padding:10px 0 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:auto}

.topcomment-sh{width:auto;height:40px;background:#fff;color:#666;margin-top:20px;text-align:center;font-size:18px;line-height:40px;position:relative;cursor:pointer;border-bottom:1px solid #ddd}

.topcomment-sh:hover{background:#337ab7;color:#fff}

#topcomment-box{background:#fff;padding:10px 20px 10px 20px;display:none}

.dsq-widget ul.dsq-widget-list{padding:0!important;margin-right:-30px!important;text-align:left}

img.dsq-widget-avatar{margin:0 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 2% 5px 0!important;padding:0 0 4px!important;list-style-type:none;clear:none!important;border-bottom:1px solid #ddd;display:inline;float:left;width:30.333333%}

a.dsq-widget-user{font-weight:500!important;display:block!important;margin-bottom:5px}

.clear{clear:both!important}

/*]]>*/

</style>

yang saya tandai, jika sudah ada dihapus saja.

2. Kemudian cari css untuk komentar disqus, biasanya seperti ini

#comments{background:#fff;clear:both;margin:20px 0;line-height:1em;padding:5px 20px}

ubah margin-nya menjadi margin:0px!important;

3. Selanjutnya silahkan copy kode berikut:

<div class='topcomment-sh' onclick='toggleNavPanel2(&apos;topcomment-box&apos;)'><i aria-hidden='true' class='fa fa-comments'/><span id='topcomment-button'> Show Top Commentators</span></div>

<div id='topcomment-box'>

<div class='dsq-widget' id='topcomment'>

<script type='text/javascript'>

//<![CDATA[

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://username.disqus.com/top_commenters_widget.js?num_items=15&hide_mods=1&hide_avatars=0&avatar_size=32\"></scr" + "ipt>");

//]]>

</script>

</div>

<div class='clear'/>

</div>

kemudian simpan tepat dibawah kode ini

<b:includable id='comments' var='post'>

Jika blog anda menggunakan 3 sistem komentar, silahkan simpan tepat dibawah kode ini:

<div class='disqus-box' id='disqus-box'>

Keterangan:
username : ganti dengan user nama disqus anda
num_items : jumlah tampilan (silahkan atur jumlahnya)
hide_mods : sembunyikan komentar admin (1 sembunyi, 0 tampil)
hide_avatars : sembunyikan gambar (1 sembunyi, 0 tampil)
avatar_size : mengatur ukuran gambar user

4. Terakhir silahkan simpan script dibawah ini diatas </body>

<script type='text/javascript'>

//<![CDATA[

function toggleNavPanel2(e){var t=document.getElementById(e),c=document.getElementById("topcomment-button"),l="block";t.style.display==l?(t.style.display="none",c.innerHTML="Show Top Commentator"):(t.style.display="block",c.innerHTML="Hide Top Commentator")}
$("#topcomment a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');

//]]>

</script>

Bagaimana, mudah kan? selamat mencoba...

Referensi:
http://www.kompiajaib.com/2016/08/membuat-parse-tool-untuk-text-style.html
http://blog.kangismet.net/2015/10/disqus-top-commenters-widget-for-blogger.html