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 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 semoga 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 menyerupai apa widget disqus recent comment nya, berikut aku kasih lihat tumpuan widget nya, bila tertarik silahkan lanjutkan baca artikel ini.

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

Untuk tumpuan orisinil widget disqus recent comment nya sahabat dapat lihat eksklusif 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 arahan 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.

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

Bagikan Artikel ini