Cara Memasang Disqus Recent Comment di Blogger

Tutorial Blogger/blogspot kali ini tentang cara memasang widget recent comment atau komentar terbaru Disqus pada sidebar blog.

Widget ini paling cocok digunakan untuk blog yang menggunakan komentar Disqus. Bagi yang tertarik memasang widget ini di blognya, silahkan baca terlebih dahulu tentang cara memasang komentar Disqus di blog.

Baik yang sudah menggunakan domain TLD (top level domain) maupun yang masih menggunakan domain bawaan Blogger, blogspot.

Memasang widget Recent Comment Disqus di Blogspot

Silahkan login ke Blogger
Masuke dashboard blog > Theme > Edit HTML
Letakkan CSS ini tepat di atas kode </style> (yang pertama)

/* Recent Disqus Comments CSS */
#recent_comments{display:block;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}
#recent_comments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto}
#recent_comments ul.dsq-widget-list::-webkit-scrollbar {height:8px;width:8px;background:#f5f5f5}
#recent_comments ul.dsq-widget-list::-webkit-scrollbar-thumb {background-color:#e2e2e2;}
#recent_comments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;clear:both;display:block}
#recent_comments p.dsq-widget-meta{clear:both;font-size:85%;margin-top:5px;font-weight:400}
#recent_comments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa}
#recent_comments p.dsq-widget-meta a:hover{color:#E9A12F;text-decoration:underline}
#recent_comments li.dsq-widget-item{margin:0;padding:10px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#999;font-weight:400;line-height:1.3em!important}
#recent_comments li.dsq-widget-item:last-child{border-bottom:none}
#recent_comments a.dsq-widget-user {display:table;color:#010101;font-weight:700;}
#recent_comments a.dsq-widget-user:hover{color:#E9A12F;}
#recent_comments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#recent_comments .dsq-widget-comment p{display:inline-block;font-size:92%;margin:0;font-weight:400;color:#444;max-width:100%;}
#recent_comments .dsq-widget-item pre{position:relative;background:#ffe4ad;padding-top:0;border-radius:4px;transition:all .3s}
#recent_comments .dsq-widget-item pre:hover {background:#ffe4ad;}
#recent_comments .dsq-widget-item pre code{color:#908575;font-size:82%}
#recent_comments .dsq-widget-item pre:before{content:&#39;&#39;;position:absolute;padding:initial;font-size:initial;text-indent:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#ebd099}
#recent_comments .dsq-widget-item pre:after{content:&#39;&#39;;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}

Simpan Template

Setelah itu, kembali perhatikan menu di dashboard blog.

Klik Tata Letak/layout > Tambahkan Gadget (pada bagian sidebar)
Pilih HTML/JavaScript, lalu pastekan kode berikut ini:

<div id="recent_comments" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://themeindie.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script></div>

Perhatikan:
Silahkan ubah kode yang ditandai di atas, dengan ID komentar Disqus untuk blog Anda.

Simpan, dan lihat hasilnya dengan meload kembali blog Anda.

Demikian tutorial tentang cara memasang recent comment Disqus/komentar terbaru Disqus di blog. Semoga membantu dan bermanfaat.

Terima kasih!