Membuat Recent Comment Thumbnail dengan Avatar

Membuat Recent Comment Thumbnail dengan Avatar

Recent comments dengan avatar (image profile) seperti yang  anda lihat pada image disamping adalah widget yang sangat menarik. Widget tersebut kini menampilkan gambar avatar para komentator tentunya yang menggunakan akun google beserta dengan komen ringkas pada post yang berkaitan dalam Blogger.
Untuk memasang widget recent comment dengan avatar ini pada blog anda, sila ikut beberapa langkah di bawah.

Langkah 1
Log in blog > Dashboard > Layout > Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2
Copy kode di bawah dan paste pada ruang Content HTML/Javascript (lihat langkah 1).

 <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 = 10,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 60,
showMorelink = false,
moreLinktext = "More �»",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</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://namablog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>

Penjelasan :
untuk menampilkan jumlah recent comment yang akan ditampilkan. Sobat bisa merubah nilai pada “numComments”. Di atas bisa dilihat numComments = 10, ini maksudnya untuk menampilkan jumlah recent comment sebanyak 10 komentar terakhir.
Sedangkan untuk menampilkan summary teks yang akan ditampilkan pada recent comment dapat diatur pada “characters”. Di atas bisa dilihat characters = 60, ini maksudnya untuk menampilkan panjang teks 60 pixel.
Ok, semoga widget ini bermanfaat.