Cara Memasang Widget Komentar Terbaru Dari Disqus

Seperti yang kita tahu, Disqus merupakan salah satu platform sistem komentar terpopuler ketika ini. Selain dengan tampilan yang profesional, Disqus juga menunjukkan fitur-fitur yang menarik diantaranya yaitu sistem moderasi dan edit komentar yang dimana komentar sanggup kita edit bila 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 aku akan mengembangkan bagaimana Cara Memasang Widget Komentar Terbaru dari Disqus di blog Anda.

Fungsi widget komentar terbaru dari Disqus ini yaitu 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 memakai sistem komentar Disqus

1. Login ke Blogger > Tata letak > Buat widget gres 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 isyarat yang ditandai dengan nama user blog Disqus Anda.

2. Simpan widget dan lihat hasilnya.

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

Share this post