Widget Recent Comment Disqus Responsive Di Blog

Pehawe - Pada kesempatan kali ini aku akan membagikan sebuah tutorial bagaimana cara menciptakan 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 sanggup melihat komentar terbaru pada semua postingan blog kita.

Nah untuk yang ingin tau bagaimana cara membuat Widget Recent Comment Disqus ini, silahkan pribadi saja ikuti tutorial berikut :

Widget Recent Comment Disqus Responsive di Blog

Login ke Blogger Kemudian pilih Menu Layout
Selanjutnya pilih Add Gadget sesuai daerah dimana nantinya akan di tampilkan widget recent comment Disqus ini, lalu pilih HTML/Javascript dan pastekan arahan 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 sanggup aku bagikan kali ini. Semoga bermanfaat dan Salam luar biasa.

Share this post