Cara Menciptakan 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 menyebarkan 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 lalu hari..

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

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

• Login ke Blogger.com

• Masuk ke Tataletak , klik Tambahkan Gadget atau add widget

• Lalu cari dan klik HTML/Javascript, pola lihat gambar.

• Setelah di klik nanti akan ada tampilan menyerupai 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, goresan pena 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 tepat atau tidak.

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

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