Cara Memasang Disqus Recent Comment Di Blogger

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

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

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

Memasang widget Recent Comment Disqus di Blogspot

Silahkan login ke Blogger
Masuke dashboard blog > Theme > Edit HTML
Letakkan CSS ini sempurna di atas instruksi </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 sajian di dashboard blog.

Klik Tata Letak/layout > Tambahkan Gadget (pada bab sidebar)
Pilih HTML/JavaScript, kemudian pastekan instruksi 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 instruksi yang ditandai di atas, dengan ID komentar Disqus untuk blog Anda.

Simpan, dan lihat akhirnya dengan meload kembali blog Anda.

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

Terima kasih!

Advertisement