Cara Membuat Widget Komentar Terbaru Disqus di Blog

Komentar Disqus adalah sistem komentar yang paling banyak di gunakan oleh situs-situs besar seperti CNN, ataupun blog-blog yang sudah terkenal seperti Arlina Desing. Komentar disqus sebelumnya adalah komentar yang tidak di kenal, namun semenjak banyaknya perbaikan pada sistem komentar ini, kini sistem komentar disqus adalah komentar yang paling sering digunakan. Pada tutorial kali ini saya akan membagikan cara membuat widget komentar terbaru disqus di blog.

bagi agan-agan yang ingin belum menggunakan widget komentar terbaru ini, silahkan ikuti cara ini. Namun bagi yang belum memasang komentar disqus di blog, silahkan lihat dulu caranya di sini.

(Baca juga : Cara Memasang Komentar Disqus di Blogger dengan Mudah)

Widget komentar terbaru disqus ini akan menampilkan beberapa komentar yang ada, baik dari admin maupun pengunjung yang berkomentar di blog. Nah, langsung saja untuk cara memasang widget komentar terbaru disqus di blog, ikuti cara dari saya berikut ini.

Cara Memasang Widget Komentar Terbaru Disqus di Blog

Langkah pertama silahkan masuk ke akun Blogger agan
pilih menu Tata Letak, pilih posisi penempatan widget yang agan inginkan, pilih Tambahkan Gadget, pilih HTML/JavaScript, masukan Judul widget, kemudian masukan script widget komentar disqus di bawah ini tepat di kolom Konten

<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://tutorialumum.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>

Pengaturan :

Silahkan ganti tutorialumum.disqus.com dengan URL admin agan (Untuk Cara Melihat URL admin Disqus agan, silahkan lihat di bawah).

Setelah selesai mengatur, silahkan pilih Simpan
Sekarang lihat blog agan, jika berhasil maka widget akan muncul seperti ini.

Cara Mengetahui URL Admin Komentar Disqus

Langkah pertama login akun Disqus agan
Di pojok kanan atas klik thumbnail gambar disqus agan, pilih View Profile
Masih di arah pojok kanan atas klik icon Settings, pilih Admin
Jika sudah masuk, sekarang pilih menu Your Sites, pilih admin yang sesuai dengan admin blog agan
Sekarang lihat URLnya, itu adalah URL Admin Disqus-nya.

Demikian tutorial dari saya mengenai cara membuat widget komentar terbaru disqus di blog. Jika ada pertanyaan mengenai cara pemasangannya, ataupun cara melihat URL admin disqus, silahkan agan masukan kedalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel ini bermanfaat untuk agan dalam membangun sebuah blog. Untuk tutorial yang lainnya dari saya mengenai widget blogger, tutorial blogger, dan tutorial yang lainnya, silahkan tetap kunjungi blog Tutorial Umum.

Cari Blog Ini