Cara Memasang Widget Komentar Terbaru dari Disqus
Snippet
iNDZGN - Seperti yang kita ketahui, Disqus merupakan salah satu platform sistem komentar paling populer saat ini. Selain dengan tampilan yang responsive, Disqus juga menawarkan berbagai fitur menarik diantaranya adalah moderasi dan edit komentar yang artinya kita dapat mengedit komentar jika ada salah satu pengunjung yang menyisipkan link atau menyebutkan salah satu kata yang sudah disaring di pengaturan Disqus.
Sebenarnya masih banyak keunggulan lainnya yang di tawarkan oleh Platform Disqus ini, namun pada kesempatan kali ini admin akan berbagi mengenai bagaimana cara Memasang Widget Komentar Terbaru dari Disqus pada blog kamu.
Fungsi dari widget ini adalah menampilkan komentar terbaru baik dari visitor ataupun adminnya sendiri yaitu kamu pada sebuah artikel di blog yang kamu punya. Jika kamu tertarik, ikuti tutorial di bawah ini. Sebelum pemasangan widget ini, diharapkan kamu sudah menggunakan sistem komentar disqus pada blog yang kamu kelola.
Memasang Widget Komentar Terbaru dari Disqus
1. Login Blogger -> tata Letak -> Buat Widget Baru HTML/Javascript -> Kemudian tambahkan script kode di bawah ini pada widget yang baru kamu buat tadi.<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://indzgn.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>
Cari tulisan indzgn.disqus.com pada script kode diatas dan ganti dengan user blog Disqus kamu.
2. Simpan Widget tersebut dan lihat hasilnya.
Sangat mudah bukan? bagikan artikel ini ke teman kamu agar tidak kudet. Demikian informasi mengenai Cara Memasang Widget Komentar Terbaru dari Disqus. Semoga bermanfaat untuk kamu. Terimakasih.
