Cara Menciptakan Widget Recent Comment Disqus Keren Di Blog

Di postingan sebelumnya aku pernah membahas tutorial cara menciptakan widget recent comment scroll di blog, alasannya yakni kebetulan aku mengganti kotak komentar bawaan blogspot yang ada di blog aku dengan Disqus jadi ya aku harus memodifikasi script recent comment yang sebelumnya sudah terpasang biar dapat berfungsi dan synkron dengan Disqus.

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

Bagi sahabat yang ingin tau ibarat apa widget disqus recent comment nya, berikut aku kasih lihat teladan widget nya, bila tertarik silahkan lanjutkan baca artikel ini.

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

Untuk teladan orisinil widget disqus recent comment nya sahabat dapat lihat pribadi di sidebar sebelah kanan blog ini yang kemungkinan akan terus aku 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 instruksi 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, bila sudah klik simpan, kini silahkan reload kembali halaman blog sahabat dan lihat hasilnya, gampang bukan ? semoga berhasil.

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

Share this post