Widget Recent Comment Disqus Responsive di Blog

Pehawe - Pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat ataupun memasang Widget Recent Comment Disqus Responsive di Blog dengan mudah. Widget ini sangat cocok untuk para pengguna blogger yang sebelumnya sudah memasang dan mengaktifkan komentar disqus di blogspot. Karena dengan memasang Widget Recent Comment Disqus kita dapat melihat komentar terbaru pada semua postingan blog kita.

Nah untuk yang penasaran bagaimana cara membuat Widget Recent Comment Disqus ini, silahkan langsung saja ikuti tutorial berikut :

Widget Recent Comment Disqus Responsive di Blog

Login ke Blogger Kemudian pilih Menu Layout
Selanjutnya pilih Add Gadget sesuai tempat dimana nantinya akan di tampilkan widget recent comment Disqus ini, kemudian pilih HTML/Javascript dan pastekan kode berikut :

<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:248px;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:248px;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}v
#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;font-size:82%;color:rgba(255,255,255,.4)}
#RecentComments p.dsq-widget-meta a:hover{color:#fff}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 10px 6px 0;list-style-type:none;clear:both;border-bottom:1px solid rgba(255,255,255,.1);color:#999;font-weight:400}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;color:#fff;font-weight:400;}
#RecentComments a.dsq-widget-user:hover{color:#fff;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:82%;margin:0;font-weight:400;color:rgba(255,255,255,.6);max-width:100%;line-height:normal}
#RecentComments .dsq-widget-item pre{position:relative;background:#2c3641;padding:5px;transition:all .3s;overflow:hidden;margin:10px 0;font-size:80%}
#RecentComments .dsq-widget-item pre:hover {background:#2c3641;}
#RecentComments .dsq-widget-item pre code{color:#908575;font-size:82%}
#RecentComments span.dsq-widget-comment a{color:#f1c40f}
#RecentComments span.dsq-widget-comment a:hover{color:#fff}
</style>
<div id="RecentComments" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://maduracomputindo.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 angka 240 untuk mengatur tingginya, dan ganti maduracomputindo dengan URL Disqus agan masing-masing.

Terakhir silahkan Simpan dan lihat hasilnya.

Mungkin itu saja tutorial Cara Menambahkan Widget Recent Comment Disqus Responsive di Blogger yang dapat saya bagikan kali ini. Semoga bermanfaat dan Salam luar biasa.

Berbagi :