Cara Membuat Recent Comments Disqus

Cara Membuat Widget Recent Comments Disqus Di Blog

Cara Memasang Recent Comments Disqus Di Blogger, Pada postingan kali ini saya selaku admin blog mas tamvan akan berbagi tutorial memasang sebuah widget komentar disqus di website blogger.

Widget Komentar terbaru ini khusus bagi kalian yang memasang komentar disqus di blognya, jadi kalo kalian memasang widget ini tapi tidak memasang komentar disqus atau tidak ada yang komentar di akun disqus kalian. maka tampilannya akan kosong.

Buat kalian yang memasang komentar bawaan blogger, mungkin nanti saya akan posting d kemudian hari..

Widget komentar disqus ini sangat simple kalian tinggal pasang dan udah jadi tinggal sesuain sendiri tampilannya dengan selera kalian.

Okeh tanpa basa basi lagi mari kita masuk ke tahap pemasangan widget recent comments disqus di blog.

Masuk ke Tataletak , klik Tambahkan Gadget atau add widget

Lalu cari dan klik HTML/Javascript, contoh lihat gambar.

Setelah di klik nanti akan ada tampilan seperti ini...

Tinggal masukan script dibawah ini kedalamnya....


<style scoped="scoped" type="text/css">
#recent_comments{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;}
#recent_comments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}
#recent_comments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#recent_comments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#recent_comments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa}
#recent_comments p.dsq-widget-meta a:hover{color:#ff675c}
#recent_comments li.dsq-widget-item{margin:0;padding:6px 10px 6px 0;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}
#recent_comments li.dsq-widget-item:last-child{border-bottom:none}
#recent_comments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}
#recent_comments a.dsq-widget-user:hover{color:#999;}
#recent_comments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#recent_comments .dsq-widget-comment p{display:inline-block;font-size:92%;margin:0;font-weight:400;color:#444;max-width:100%;}
#recent_comments .dsq-widget-item pre{position:relative;background:#ffe4ad;padding-top:0;border-radius:4px;transition:all .3s}
#recent_comments .dsq-widget-item pre:hover {background:#ffe4ad;}
#recent_comments .dsq-widget-item pre code{color:#908575;font-size:82%}
#recent_comments .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:#ebd099}
#recent_comments .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="recent_comments" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://tejasukmana.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script>

Yang saya kasih garis border merah, tulisan ini tejasukmana ganti dengan id komentar disqus kalian ya.
Recent Comments disqus ini memerlukan ajax, buat template kalian yang belum terpasang script ajax, silahkan masukan script ini di atas </head>


<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

Silahkan save dan done, lihat hasilnya.

Kalo belum ada komentar silahkan coba anda komentar sendiri di salah satu artikelnya, untuk membukrikan apakah widgetnya berhasil dengan sempurna atau tidak.

Cukup sekian dan terima kasih, semoga artikel dari saya tentang Cara Membuat Recent Comments Disqus Di Bloggerini bermanfaat ya.

Jangan lupa, bila ada kesulitan silahkan bertanya di kolom komentar ya :)