gunawan

Cara Membuat Recent Comments Plus Image

Kali ini saya share tentang Cara Membuat Recent Comments Plus Image, Tapi sebelumnya saya akan menjelaskan secara singkat apa itu Recent Comments..? Recent Comments adalah widget yang menampilkan Seluruh Isi komentar yang ada di blog anda, yang bisa anda tampilkan pada sidebar sehingga pengunjung mengetahui isi-isi komentar diblog anda.

Biasanya recent comments hanya menampilkan link dan isi komentar. Namun sekarang ada yang sedikit berbeda yaitu recent comments dengan Thumbnail Image dan fungsi scroll.

Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

<div style="overflow:auto;width:auto;height:330px; border:1px solid #000; padding:3px; background: none repeat scroll 0% 0% #fff">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:#111;margin:0 0 2px !important;padding:0 0 2px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:111;-webkit-box-shadow:0 2px 1px #fff;-moz-box-shadow:0 1px 1px #fff;box-shadow:0 2px 1px #fff;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: 13px;font-style: italic;line-height: 1.4;}
</style>
<script src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js" type="text/javascript"/>
<script type="text/javascript">
//&lt;![CDATA[
    // Recent Comments Settings
    var
 numComments  = 100,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 200,
 defaultAvatar  = " https://lh3.googleusercontent.com/-ZLhbUtEyLmY/TyOr6kOppmI/AAAAAAAAAYw/kJyqTRMtWNo/s128/AvatarQ.png ",
 hideCredits = true;
//]]&gt;
</script>
<ul>
<script src="http://.blogspot.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=100" type="text/javascript"/>
</ul></div></script></ul></div>

5. Klik Simpan. Lihat hasilnya.

NB :: - Teks yang berwarna merah, anda ganti dengan Nama Blog anda.

sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.