Cara Membuat Recent Comments Dengan Avatar di Blog

Recent Comments atau komentar terakhir adalah sebuah widget yang menampilan beberapa komentar terbaru di blog. Pada dasarnya blogger sudah menyediakan fitur Recent Comments ini, tapi menurut saya desainnya kurang menarik. Oleh karena itu sekarang saya akan sharing mengenai cara membuat Recent Comments dengan avatar/foto, tentu desain dan tampilannya berbeda dengan yang sudah di sediakan blogger. Widget Recent Comments ini saya dapatkan dari way2blogging, salah satu situs web favorit saya. Recent comments ini bekerja berdasarkan Comment RSS feed blog.

Berikut Cara Membuat Recent Coments dengan Avatar di Blogger/Blogspot
1. Pada dashboard pilih layout
2. Klik Add gadget > HTML/JavaScript
3. Beri judul Recent Comments, lalu pada kotak content masukkan kode di bawah ini

<div style=" overflow:auto; text-align: left; width: 300px;">
<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 = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]></script>
<script type="text/javascript" src="http://blogbintaro.googlecode.com/files/recent-comments-with-avatar.js"></script>
<script type="text/javascript" src=" http://blog-bintaro.blogspot.com /feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script>
</div>

Keterangan:

numComments = 5, adalah jumlah komentar yang ingin ditampilkan, anda bisa mengubah nilai 5 sesuai keinginan anda.
avatarSize = 30, adalah ukuran avatar/gambar yang tampil.
characters = 40, adalah jumlah karakter/kata yang di tampilkan, kurangkan nilai 40 untuk memperpendek karakter dan sebaliknya jika ingin memperpanjang.
http://blog-bintaro.blogspot.com, silahkan ubah dengan url blog anda.