Cara Memasang Widget Komentar Terbaru dari Disqus

Seperti yang kita tahu, Disqus merupakan salah satu platform sistem komentar terpopuler saat ini. Selain dengan tampilan yang profesional.

Disqus juga menawarkan fitur-fitur yang menarik diantaranya adalah sistem moderasi dan edit komentar yang dimana komentar dapat kita edit jika ada salah satu pengunjung yang berkomentar dengan menyisipkan link atau menyebutkan salah satu kata yang sudah disaring di pengaturan Disqus.

Masih banyak keunggulan lain yang ditawarkan Disqus, namun di sini saya akan berbagi bagaimana Cara Memasang Widget Komentar Terbaru dari Disqus di blog Anda.

Fungsi widget komentar terbaru dari Disqus ini adalah untuk menampilkan komentar terbaru baik dari pengunjung maupun admin yang mengomentari artikel di blognya. Bagi yang tertarik, Silakan disimak langkah berikut :

Pastikan di blog Anda sudah menggunakan sistem komentar Disqus

1. Login ke Blogger > Tata letak > Buat widget baru HTML/Javascript > Kemudian tambahkan script komentar Disqus di bawah ini di dalam widget :

<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;height:400px;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;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{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}
#RecentComments a.dsq-widget-user:hover{color:#999;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
#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://sangADS.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></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>

Ganti kode yang ditandai dengan nama user blog Disqus Anda.


2. Simpan widget dan lihat hasilnya.

Demikian tutorial Cara Memasang Widget Komentar Terbaru dari Disqus, semoga bermanfaat. Salam Blogger.