Cara memasang widget komentar Disqus responsive terbaru di Blog

Cara memasang widget komentar Disqus responsive terbaru di Blog - Siapa yang tidak tau dengan Disqus, yang merupakan sebuah platfrom atau sebuah layanan yang memberikan sistem komentar dengan tampilan profesional dan menarik. Selain memberikan tampilan yang profesional, disqus juga menyediakan layanan untuk mengedit komentar dan lainnya, serta penggunaannya yang mudah.

Add Cara memasang widget komentar Disqus responsive terbaru di Blog

Namun kita tidak akan membahas apa saja keunggulan dari Disqus lebih lengkap, melainkan kita akan membahas bagaimana caranya menampilkan widget komentar Disqus terbaru secara otomatis. Widget ini berguna untuk menampilkan komentar-komentar terbaru yang ada di sidebar blog anda
Jika anda tertarik, silakan anda simak pembahasan berikutnya dibawah ini :

Blog anda harus memiliki sistem komentar terlebih dahulu

• Langkah pertama Login ke Blogger > Tata Letak > Tambah widget baru > HTML/JavaScipt > kemudian tambahkan scrip kode dibawah ini di kolom widget tadi

  <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:400px;}
  #RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;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}
  #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;color:#444}
  #RecentComments p.dsq-widget-meta a:hover{color:#ff675c}
  #RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}
  #RecentComments li.dsq-widget-item:last-child{border-bottom:none}
  #RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}
  #RecentComments a.dsq-widget-user:hover{color:#999;}
  #RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
  #RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}
  #RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
  #RecentComments .dsq-widget-item pre:hover {opacity:1}
  #RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
  #RecentComments .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:#d8e3b0}
  #RecentComments .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="RecentComments" class="dsq-widget">
  <script defer="defer" type='text/javascript'>
  //<![CDATA[
  document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://hohoseo.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>

 Ganti kode yang ditandai dengan shorname disqus anda

• Simpan widget dan kemudian lihat hasilnya 

Sekian artikel kali ini tentang bagaimana cara memasang widget komentar disqus dengan mudah di Blog, dan semoga bermamfaat, selamat praktek.