Cara Membuat Widget Recent Comment Disqus Keren di Blog

Di postingan sebelumnya saya pernah membahas tutorial cara membuat widget recent comment scroll di blog, karena kebetulan saya mengganti kotak komentar bawaan blogspot yang ada di blog saya dengan Disqus jadi ya saya harus memodifikasi script recent comment yang sebelumnya sudah terpasang agar bisa berfungsi dan synkron dengan Disqus.


Tapi sebelum sobat memasang widget disqus recent comment ini tentu saja harus menginstall system komentar disqus nya dulu di blog sobat, untuk tutorial nya sudah saya posting di artikel sebelum nya silahkan cari di kolom pencarian atau silahkan klik link dibawah postingan ini.

Bagi sobat yang penasaran seperti apa widget disqus recent comment nya, berikut saya kasih lihat contoh widget nya, kalau tertarik silahkan lanjutkan baca artikel ini.


Untuk tampilan nya masih sama seperti widget recent comment yang sebelumnya, hanya saja yang membedakan widget recent comment ini menampilkan setiap komentar terakhir dari Disqus dengan sedikit kustomisasi agar terlihat lebih elegan

Untuk contoh asli widget disqus recent comment nya sobat bisa lihat langsung di sidebar sebelah kanan blog ini yang kemungkinan akan terus saya gunakan, untuk memasang widget recent comment ini sangat mudah, let's go !

1. Login ke dasbor Blogger
2. Pilih Tata Letak
3. klik Tambahkan Gadget
4. Pilih HTML/JavaScript
5. Copy paste kode dibawah ini dan klik Simpan.

<div style="overflow:auto;width:auto;height:200px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;">
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript" src="http://venturazsblog.disqus.com/recent_comments_widget.js?num_items=200&amp;hide_avatars=0&amp;avatar_size=40&amp;excerpt_length=100"></script></div>

http://venturazsblog.disqus.com silahkan ganti dengan ID disqus sobat, kalau sudah klik simpan, sekarang silahkan reload kembali halaman blog sobat dan lihat hasilnya, mudah bukan ? semoga berhasil.

Baca juga :
Cara memasang komentar disqus di blog
Cara membuat recent comment scroll di blogspot

Subscribe to receive free email updates: