Memasang Recent Comment Disqus di Blogger

Recent Comment Disqus

Selamat pagi sobat blogger... Mudah-mudahan selalu dalam suasana happy dan tidak lupa menyeruput segelas kopi.

Hari ini saya pengen ngeshare tentang tips sederhana bagaimana cara memasang recent comment (komentar terbaru) Disqus di platform blogger.

Saat ini komentar disqus sangat populer digunakan diplatform blogger, terlepas dari kelebihan dan kekurangannya beberapa master blogger lebih memilih menggunakan komentar disqus daripada komentar bawaan blogger di blognya.

Pada tulisan kali ini saya tidak membahas kelebihan atau kekurangan disqus, namun hanya membahas tentang cara memasang recent comment disqus di blogger.

Apa itu recent comment?

Recent comment adalah sebuah widget yang menampilkan komentar terbaru yang bertujuan untuk mempermudah mengelola/membalas komen-komen pengunjung blog.

Cara Memasang Recent Comment Disqus di Blogger:

1. Untuk memasang recent comment disqus tentunya blog sobat harus terlebih dahulu sudah terpasang komentar disqus. (Baca: Cara Memasang Komentar Disqus di Blogger)
2. Bila blog sobat sudah terpasang komentar disqus maka ikuti langkah-langkah berikut:
3. Login ke akun blogger kemudian pilih Tata Letak, Kemudian klik Add Gadget, lalu pilih HTML/JavaScript.
4. Selanjutnya copy kode di bawah dan pastekan ke HTML/JavaScript yg tadi.

   
   <style scoped="scoped" type="text/css">
   #RecentComments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;max-height:160px;height:auto;}
   #RecentComments ul.dsq-widget-list{list-style-type:none;text-align:left;max-height:160px;overflow:auto;}
   #RecentComments ul li:before{content:"" !important;display:none}
   #RecentComments img.dsq-widget-avatar{margin:0 4px 0 0;width:48px;height:48px;padding:0;float:left;border-radius:2px;clear:both;display:block}
   #RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:2px;font-weight:400}
   #RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}
   #RecentComments p.dsq-widget-meta a:hover{color:#ff675c}
   #RecentComments li.dsq-widget-item{line-height:1.2;margin:0;padding:4px 0 2px;list-style-type:none;clear:both;color:#2F74D0;font-weight:600}
   #RecentComments a.dsq-widget-user {line-height:1.2;list-style:none;color:#2F74D0;font-weight:600;}
   #RecentComments a.dsq-widget-user:hover{color:#999;}
   #RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:2px;}
   #RecentComments .dsq-widget-comment p {display:block;font-size:88%;line-height:1.2;margin:0;font-weight:300;color:#444}
   #RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;opacity:.9;}
   #RecentComments .dsq-widget-item pre:hover {opacity:1}
   #RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
   #RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
   #RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
   </style>
   <div id="RecentComments" class="dsq-widget">
   <script defer="defer" type='text/javascript'>
   //<![CDATA[
   document.write("<scr" + "ipt type="text/javascript" src="https://dzulcyber.disqus.com/recent_comments_widget.js?num_items=8&hide_mods=0&hide_avatars=0&avatar_size=16&excerpt_length=50"></scr" + "ipt>");
   //]]>
   </script>
   <script type='text/javascript'>
   //<![CDATA[
   $("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
   //]]>
   </script>
   </div>
   

   
   Atur/edit kode css sesuai kebutuhan, lalu ganti dzulcyber dengan username disqus sobat. Selanjutnya klik Simpan.
5. Demonya bisa dilihat di blog ini.

Nah,, sekian dulu tips memasang recent comment disqus diblogger, bila ada pertanyaan silahkan di kolom komentar.