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 semuanya adalah Gratis, dan kalian di ijinkan untuk mereshare ulang dg menyertakan link sumber dari Pehawe Dan kami tidak pernah meminta donasi atas apa yg kami bagikan. Trims

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 sobat ingin berkomentar dengan format css, js dan html silahkan Parse terlebih dahulu.
Show Parser
Open Comments