Cara Memasang Widget Komentar Terbaru Disqus

Cara Memasang Widget Komentar Terbaru Disqus

Hari ini saya tertarik untuk memasang widget komentar terbaru atau recent comment yang di implementasikan dari sistem komentar disqus. Widget ini menampilkan daftar komentar terbaru dan terbaik dari pengunjung atau admin sendiri.

Widget recent comment juga mempermudah admin untuk menanggapi komentar pengunjung yang masuk tanpa harus membuka dasbor blogger. Sebuah blog dengan trafik komentar yang tinggi akan memberikan kesan yang baik dari pengunjung.

Saya sendiri suka membaca komentar yang bersifat membangun dan mungkin penyelesaian dari sebuah masalah baik itu di blog sendiri ataupun orang lain. Dengan begitu pengetahuan kita juga akan bertambah.

Jika sobat tertarik dengan widget ini silahkan ikuti langkah berikut dan pastikan juga blog Anda sudah menggunakan sistem komentar dari Disqus.

Cara Memasang Widget Komentar Terbaru Disqus


1. Tambahkan kode script berikut pada widget yang di inginkan.

<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;padding:10px}#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:#aaa}#RecentComments p.dsq-widget-meta a:hover {color:#ff675c}#RecentComments li.dsq-widget-item {margin:0;padding:6px 10px 6px 0;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:92%;margin:0;font-weight:400;color:#444;max-width:100%;line-height:1.6em}#RecentComments .dsq-widget-item pre {position:relative;background:#ffe4ad;padding-top:0;border-radius:4px;transition:all .3s;}#RecentComments .dsq-widget-item pre:hover {background:#ffe4ad}#RecentComments .dsq-widget-item pre code {color:#908575;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://nubietheme.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=0&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>

2. Silahkan ganti nubietheme.disqus.com dengan URL forum disqus Anda (shorname.disqus.com).

Konfigurasi Widget :
NameDefault ValueDescription
num_items18Jumlah item yang ingin di tampilkan
hide_mods0Set angka 1 untuk menyembunyikan komentar moderator
excerpt_length120Kutipan dari komentar
hide_avatars0Set angka 1 jika Anda tidak ingin menampilkan avatar
avatar_size32Ukuran avatar pengguna

3. Buka Blogger > Tata Letak > Tambahkan widget baru HTML/Javascript, kemudian masukan kode script dalam widget dan klik tombol Simpan.

Cara Memasang Widget Komentar Terbaru Disqus Cara Memasang Widget Komentar Terbaru Disqus

Sekian dulu artikelnya sobat semoga bisa bermanfaat, apabila ada kesalahan saya minta maaf atau silahkan berkomentar di bawah ini.

Baca juga :
- Cara Memasang Komentar Disqus di Blog
- Pengertian dan Manfaat Disqus

Penulis


EmoticonEmoticon