IwanBerbagi.com - Sebagai penghargaan saya kepada pengunjung blog cupu saya ini yang sudah menyempatkan berkomentar maupun berdiskusi perihal artikel. Maka saya sudah buatkan halaman khusus untuk menampilkan Top Commentator dan Recent Comments.

Widget ini saya adopsi dari KompiAjaib, karena Kang Adhy tidak kunjung membagikan cara membuatnya karena sibuk ngoprek template AMP Google (kayaknya sih gitu). Jadi saya putuskan untuk melihat kodenya langsung dan mempelajarinya dari template KompiAjaib. Dan saya coba lihat dan sesuaikan pada template saya. Dan akhirnya berhasil juga saya adopsi ke blog cupu saya ini.
Top Commentator and Recent Comments Disqus For Blogger

Jika kamu tertarik memasangnya juga pada blog kamu, kamu bisa memasangnya dengan mudah. Kamu hanya perlu mengikuti step singkat berikut ini.

Membuat Halaman Static Baru
Karena widget ini akan kita tempatkan pada halaman tertentu supaya tidak memberatkan loading blog dan juga akan menjadi satu halaman aja antar Top Komentator dan Recent Comments Disqusnya. Untuk lebih jelasnya kamu lihat lagi deh demonya yah. Buat Halaman Static baru seperti berikut :
Top Commentator and Recent Comments Disqus
Jika sudah kamu bisa masuk pada mode HTML dan kamu copy dan paste semua kode berikut ini pada mode HTML tersebut dan baca baik-baik beberapa pengaturan yang harus kamu lakukan.
<style>
#topcommenters,#RecentComments{display:block;width:100%;margin:0 auto;padding:10px 0 0;border-top:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:auto}
.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}
.dsq-widget-comment p{font-size:12px;line-height:1.2em!important}
.dsq-widget-comment{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px!important}
p.dsq-widget-meta a{display:inline-block!important;width:48%;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
li.dsq-widget-item{margin:0 3% 12px 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:700;display:block!important;margin-bottom:5px}
.clear{clear:both}
.post-body {font-size:14px;line-height:1.2em!important}
pre,code{margin:0;font-family: Roboto,Arial,sans-serif;}
@media screen and (max-width:800px){li.dsq-widget-item{width:47%}
.dsq-widget ul.dsq-widget-list{margin-right:0!important;}
}
@media screen and (max-width:414px){li.dsq-widget-item{width:97%}
}
#topcommenter:target { 
  display: block; 
  margin-top: -20px; 
  height: 20px; 
  visibility: hidden; 
}
.post-body h3{font-size:22px}
</style>

<span id='topcommenter'></span>
<h3>Top Commentators:</h3>
<div id="topcommenters" class="dsq-widget">
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://bloggerberbagi.disqus.com/top_commenters_widget.js?num_items=21&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=80\"></scr" + "ipt>");
//]]>
</script>
<div class="clear"></div>
</div>
<br/>
<br/>
<h3>Recent Comments:</h3>
<div id="RecentComments" class="dsq-widget">
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://bloggerberbagi.disqus.com/recent_comments_widget.js?num_items=21&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=80\"></scr" + "ipt>");
//]]>
</script>
<div class="clear"></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type='text/javascript'>
//<![CDATA[
$("#topcommenters a,#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>

Pengaturan Widget
Perhatikan warna pada script tersebut, dan mulai sesuaikan seperti berikut :

WarnaKeterangan
Warna HijauIni merupakan username disqus yang kamu gunakan, nah pada contoh ini kan menggunakan username disqus yang saya gunakan pada blog ini. Sesuaikan aja yah..
Warna KuningSesuaikan dengan jumlah komentar dan jumlah recent comments yang ingin kamu tampilkan pada halaman static Top Commentator pada widget ini.
Warna MerahKita tahu setiap template pada umumnya sudah menggunakan Jquery. Namun ada beberapa template yang sudah dioptimasi dan menghindari penggunaan Jquery ini, maka dari itu perhatikan template kamu apakah sudah menggunakan Jquery atau belum, jika sudah hapus script yang saya tandai warna merah tersebut.

Untuk posisi halaman static Disqus Commentator pada blog ini sudah saya letakkan pada bagian footer sebelah kanan. Itu saya rasa posisi paling pas untuk template pada blog ini. Untuk kamu sendiri bisa menyesuaikan yah. Semoga Bermanfaat..
Share this with short URL:
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed