Jadi Cendekia Cara Menciptakan Top Disqus Commentators For Blogger Dengan Efek Show Hide

Sistem komentar disqus banyak menjadi pilihan kaum blogger termasuk aku alasannya ialah selain tampilan yang elegan dan minimalis, disqus juga mempunyai fitur yang tak kalah anggun dengan sistem komentar lainya, menyerupai recent comment dan top commentators. Top disqus commentators ini biasa kita lihat di dashboard sendiri, namun ternyata dapat di pasang di blog juga.

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

Akhirnya aku mencoba berinovasi untuk menampilkannya diatas kolom komentar dengan efek show hide biar tidak mengganggu ruang menyerupai 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 instruksi 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 aku tandai, kalau sudah ada dihapus saja.

2. Kemudian cari css untuk komentar disqus, biasanya menyerupai 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 instruksi 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>

lalu simpan sempurna dibawah instruksi ini

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

Jika blog anda memakai 3 sistem komentar, silahkan simpan sempurna dibawah instruksi 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, gampang kan? selamat mencoba...

Referensi:
/search?q=membuat-parse-tool-untuk-text-style
/search?q=membuat-parse-tool-untuk-text-style