Pasang Widget Recent Comments Dengan Avatar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Alhamdulillah bisa kembali update blog setelah hampir sepekan monotise blog karena baru saja berganti domain baru. InsyaAllah pengalaman custom domain baru ini akan saya share diwaktu yang lain. Pada kesempatan kali ini saya ingin berbagi lebih dulu cara memasang widget blog yang apik berikut.

Ya… widget recent comments atau widget komentar terbaru. Sebagaimana widget blogger yang lain yang memiliki banyak versi ataupun modifikasi maka widget recent comments ini juga merupakan versi kesekian kalinya disamping widget serupa yang pernah saya posting. Perbedaaan widget ini dengan pendahulunya, widget recents comment ini dilengkapi dengan avatar atau pic profil komentator dan bisa dimodifikasi lagi dengan penambahan CSS rounded pada avatar.

Baiklah berikut tutorial step by step cara memasang widget recents comments with avatar seperti pada tampilan image diatas.

1. Loggin ke blog anda

2. Pada dasbor >> Pilih Tata Letak >> Add Gadget >> HTML/JavaScript

3. Copy kode berikut dan paste kedalam kolom HTML/JavaScript:

<div style="overflow:auto;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: none;line-height: 1.4;} 
</style> 
<script type="text/javascript"> 
//<![CDATA[ 
// Recent Comments Settings 
var 
numComments = 5, 
showAvatar = true, 
avatarSize = 40, roundAvatar = true, 
characters = 100, 
defaultAvatar = "", 
hideCredits = true; 
//]]> 
</script> 
<script type="text/javascript" src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar.js"></script> 
<script type="text/javascript" src="http://www.tipstrikblogging.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script> 
<small><div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2012/09/pasang-widget-recent-comments-dengan.html" target="_blank" title="Widget Recent Comment">Get This Widget</a></div></small></div>

Sebelum anda save perhatikan kode diatas yang berwarna biru

width:300px; (sesuaikan dengan lebar, supaya mudah ubah saja jadi 100%) 
numComments (jumlah komentar yang ingin ditampilkan) 
avatarSize (ukuran avatar atau gambar profil) 
characters (jumlah kata pada komentar yang ingin ditampilkan)

URL feed comment blog ini ganti dengan blog anda!

4. Klik simpan/ save.

Demikian tutorial membuat recent comment with avatar pada blog. Semoga bermanfaat!

by : Amatullah Syukur