Cara Membuat Kumpulan Komentar Plus Avatar

Sebelumnya saya berbagi dengan kawan Cara Membuat Kumpulan Komentar, rasanya masih kurang lengkap Kumpulan Komentar tersebut kalau tanpa Avatar, seperti Kumpulan Komentar Blog saya ini :O

Bagaimana, apa kawan tertarik hehehe ?! 

Baiklah sekarang saya akan berbagi dengan kawan Cara Membuat Kumpulan Komentar Plus Avatar yang saya dapatkan pada Blogger Harish saat Blogwalking 

OK langsung saja ke caranya :

1. Masuk Account Blogger dengan ID kawan 
2. Pada Perancang Template pilih Tambah Gadget - HTML / JavaScript
3. Copas kode berikut kedalamnya

<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;
}

Screenshot Komentar

.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        = 40,
            roundAvatar    = true,
            characters        = 80,
            showMorelink = false,
            moreLinktext  = "More »",
            defaultAvatar = "URL No Avatar",
            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://blog-renovasi.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=25"></script> 

Sedikit Penjelasan untuk kawan, sedangkan yang lainnya kawan bisa mengadakan setting ulang sesuai selera kawan :

1. -webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px; adalah background  border Avatar yang berbentuk bulat, yang ditunjukkan dengan nilai 100px, kalau dikecilkan / dihilangkan akan menjadi border segi empat. 
2. URL No Avatar adalah Komentar tanpa Avatar, yang akan kelihatan hanya warna putih bulat, silahkan diganti dengan URL Avatar kawan, bisa juga dipakai Avatar Animasi
3. Silahkan ganti http://blog-renovasi.blogspot.com dengan URL Blog kawan
4. Sedangkan yang lainnya silahkan kawan mengadakan setting tambahan sesuai selera kawan
5. Jangan lupa Simpan Template kawan