Top Commentator and Recent Comments Disqus

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..

Gak perlu bolak-balik untuk cek update terbaru dari blog ini, Kamu cuma perlu Berlangganan update artikel terbaru via email:

0 Response to "Top Commentator and Recent Comments Disqus"

Post a Comment

Silahkan berkomentar sesuai topik pada Artikel ini, komentar akan saya balas ketika saya sedang tidak ada kesibukan lainnya.

Note : Jangan lupa untuk mengaktifikan centang Notify me pada kolom komentar, agar kamu mendapat notifikasi balasan dari saya langsung Via Email. Tks

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel