Menambahkan Disqus Recent Comments Widget pada Blogger

Menambahkan Disqus Recent Comments Widget pada Blogger

Saat ini banyak blogger yang menggunakan disqus. Namun masih banyak pula blogger yang belum mengetahui cara menambahkan widget disqus recent comments pada blog.

Baca Juga : Cara Memasang Komentar Disqus di Blogger atau Blogspot

Saya pun mencari tahu kesana-sini mengenai cara memasang widget disqus recent comments pada blog. Akhirnya saya menemukan tutorial tersebut di MyBloggerTricks.com. Setelah itu saya memodifikasi sedikit dengan script dari KompiAjaib.com serta telah saya buat menjadi valid HTML5. Widget ini sangat ringan. Sehingga tidak akan terlalu mempengaruhi load time (waktu muat) blog Anda. Untuk tampilannya dapat Anda lihat pada link demo di bawah ini.

Menambahkan Disqus Recent Comments Widget pada Blog

1. Masuk ke Blogger > Tata Letak
2. Klik “Tambahkan Gadget”
3. Pilih HTML/JavaScript.
4. Silahkan tambahkan script di bawah ini pada HTML/JavaScipt.

<div id="RecentComments" class="dsq-widget">
<script type="text/javascript" src="http://wahyupratama.disqus.com/recent_comments_widget.js?num_items=20&amp;hide_mods=1&amp;hide_avatars=0&amp;avatar_size=32&amp;excerpt_length=80"></script>
</div>

Catatan :

  • Ganti wahyupratama dengan username disqus Anda.
  • num_items : Jumlah komentar yang ditampilkan
  • excerpt_length : panjang komentar yang ditampilkan

5. Simpan Setelan.
6. Refresh browser Anda, setelah itu pilih menu Template > Edit HTML
7. Letakkan kode CSS di bawah ini tepat sebelum kode ]]></b:skin> atau </style>

#RecentComments{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;height:500px;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}
p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px!important}
p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
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}

8. Simpan Template

Catatan :

  • Untuk mengatur tinggi widget silahkan ganti 500px pada height:500px
  • Jangan lupa menghapus kode <b:include name=’quickedit’/> setelah menambahkan widget baru agar blog Anda tetap valid HTML5

Sekian, semoga tutorial ini bermanfaat. Terima Kasih.

Leave a Reply