Cara Memasang Kolom Komentar Terbaru dari Disqus

Baca Juga

Tips Blogger - Cara Memasang Kolom Komentar Terbaru dari Disqus – bagi anda yang ingin blognya menarik dengan memiliki kolom Komentar yang keren, berarti artikel ini adalah modal awal anda untuk mewujudkannya. Kali ini saya akan bagikan informasi mengenai Cara Memasang Kolom Komentar Terbaru dari Disqus. Disqus merupakan salah satu Platform sistem Komentar terpopuler saat ini. Disqus memiliki tampilan yang sangat Profesional, Disqus juga memberikan fitur-fitur yang sangat menarik. Di antaranya adalah sistem Moderasi dan Edit Komentar dengan menyisipkan Link atau menyebutkan salah satu kata yang sudah di saring di pengaturan Disqus.

Itu masih salah satu keunggulan dari kolom komentar dari Disqus, masih banyak lagi keunggulan jika kita menggunakan kolom komentar dari Disqus ini. Sedangkan untuk fungsinya adalah menampilkan komentar terbaru baik dari pengunjung maupun dari admin yang menjawab pertanyaan pengunjung atau mengomentari artikel nya. Kalau begitu, langsung saja kita cari tahu cara membuatnya berikut ini.

Baca juga : Cara Memasang Persentase Pada Scrollbar 

Pastikan di blog sobat sudah menggunakan Komentar Disqus

1. Login Blog Sobat > Tata Letak > Buat Widget Baru > HTML/Javascript > kemudian tambahkan Script komentar Disqus di bawah ini di dalam Widget yang tadi sobat buat.

<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://azmidesign.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 di tandai dengan nama user dari ID Diskus sobat

2. Simpan Widget Dan lihat Hasilnya.

Baca juga : Cara Membuat Blokquote Mirip Arlina Design

Demikianlah tutorial mengenai Cara Memasang Kolom Komentar Terbaru dari Disqus, semoga dapat memberikan pemahaman yang jelas, ilmu Blog yang bermanfaat dan selamat mencoba untuk sobat semua.