Recent Comments Widget with Avatars to Blogger

Hai sobat Blogger.. Gimana kabarnya neh??

Kalo sebelumnya saya pernah share artikel tentang memasang widget "Recent Comments", kali ini saya akan share artikel serupa, tapi sedikit berbeda. Ini adalah widget "Recent Comments with Avatar", dimana sobat blogger yang comment akan nampak avatarnya.

Penasaran?? Langsung aja.. Cekidot..

Cara instal:

Step 1. Masuk ke Blogger Dashboard, lalu pergi Layout dan klik pada Add a Gadget link.

Step 2. Pada popup window scroll down + pilih HTML/Javascript

Step 3. Copy & Paste code di bawah ini:

 

<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  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Note
Ganti your-blog dengan nama blog kamu.

Ganti angka "5" berwarna merah, dengan angka yng menunjukkan berapa comment yang akan muncul sesuai yang kamu inginkan... dari:

• numComments  = 5 

dan

• &max-results=5 

Untuk mengganti avatar yang tanpa nama, ganti alamat di bawah ini dengan milikmu sendiri:

• http://www.gravatar.com/avatar/?d=mm 

Untuk mengganti ukuran avatar, ganti angka 60 berwarna hijau sesuai yang kamu inginkan.

Step 4. Setelah itu klik Save, dan.... selesai!

Posted in: Tutorial Blog