Cara Menampilkan Komentar Teratas Disqus Di Sidebar Blogger

Disqus, sebuah sistem komentar di jaringan dunia maya yang bisa di integrasikan dengan platform blogging. Tentu saja salah satunya adalah Blogger.
Belum lama ini saya memakai komentar disqus di blog Renz Maulana, dan saya tidak menyesal sama sekali telah memasang komentar disqus. "Kenapa?" Sudah ada jutaan blog yang bergabung dan menggunakan sistem Disqus, dari blog kecil sampai blog terkenal.
Tetapi maaf, saat ini saya tidak akan membahas bagaimana cara memasang disqus di blog, tetapi saya akan memberikan tutorial cara menampilkan komentar teratas disqus di sidebar blog.

"Renz, berat gak tuh widgetnya?", widget ini tidak berat, malah fast loading yang berarti sangat ringan.

Kita langsung ke tutorialnya, silahkan disimak...

CARA MENAMPILKAN KOMENTAR TERATAS DISQUS DI SIDEBAR BLOGGER

Demo

Silahkan sobat copy kode framework jQuery dibawah dan paste diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'></script>

Penting: Biasanya jika blog sobat tidak memakai template bawaah blogger, kode jQuery sudah terpasang di template blog sobat, jika kode nya sudah terpasang, maka lewati saja langkah ini.

Silahkan masuk akun blogger sobat: blogger.com
Pilih Layout/Tata Letak
Add Widget/Tambahkan Widget
Pilih HTML/Javascript
Copy kode dibawah ini dan paste di isi/content

<style scoped="scoped" type="text/css">
#topcommenters{display:block;width:100%;margin:0 auto;padding:0 10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto}
.dsq-widget ul.dsq-widget-list{padding:0;margin:0;text-align:left}
img.dsq-widget-avatar{margin:3px 10px 7px 0!important;width:58px!important;height:58px!important;padding:0!important;float:left;border-radius:3px!important}
li.dsq-widget-item{margin:0!important;padding:6px 0 4px!important;list-style-type:none;clear:both;border-bottom:1px solid #ddd}
li.dsq-widget-item:last-child{border-bottom:none}
a.dsq-widget-user{font-weight:700;display:block!important;margin-bottom:5px}
</style>
<div id="topcommenters" class="dsq-widget">
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://renzmaulana.disqus.com/top_commenters_widget.js?num_items=5&hide_mods=1&hide_avatars=0&avatar_size=32\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#topcommenters a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>