Cara Memasang Widget Komentar Terbaru dari Disqus

2/28/2016
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.

Cara Memasang Widget Komentar Terbaru dari 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://arlinadesign.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.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

1 comment

This comment has been removed by the author.

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.