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>- Silahkan ganti tutorialumum.disqus.com dengan URL admin agan (Untuk Cara Melihat URL admin Disqus agan, silahkan lihat di bawah).
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.
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.