Recent Comment dengan Avatar

Sebelum ini saya pernah memposting Recent Comment (komentar Terbaru) dengan format standar, Tapi menurut sahabat Blog Iswandi comment ini sudah tersedia di falisitas blog. Lalu saya berfikir bagaimana cara membuat Recent comment dengan menampilkan wajah orang yang memberi comment (Avatar). Setelah menjelajahi blog sahabat disana sini, akhirnya ketemu juga scriptnya. Jujur ya ini bukan buatanku. Tapi saya yakin pasti banyak sahabat blogger yang membutuhkan script ini.

Beginilah cara membuat Recent Comments (Komentar Terbaru) dengan Avatar:

1. Login ke blogger lalu pilih menu "Layout"
2. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript" Lalu masukkan script dibawah ini kedalam kotak yg disediakan.

<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">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blogiswandi.blogspot.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=5"></script>

- Angka 5 merupakan jumlah komentar yang mau ditampilkan.
- Ganti Blogiswandi.blogspot.com dengan nama blogmu.

4. Simpan Script ini
5. Selesai