Skip to main content

follow us

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.
Disclaimer : Semua Konten yang kami bagikan adalah Gratis, dan untuk mereshare ulang Artikel ini silahkan sertakan link sumber dari Pehawe.

You Might Also Like:

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Jika ingin berkomentar dg format css, js dan html silahkan Parse terlebih dahulu.
Show Parser
Buka Komentar
Citchat