Widget komentar yang diletakkan di sidebar atau di Footer, terkadang menjadi motivasi bagi pengunjung blog kita untuk memberikan komentar karena komentar mereka plus foto mereka langsung terpampang di widget komentator. Lho... Foto atau gambar dari komentator kok bisa terpampang di widget komentar? Karena Widget Komentar ini adalah Recent Comments Widget with Avatar (Widget Komentar yang menampilkan Avatar).


Tidak sedikit blog atau situs yang memasang widget komentar dengan avatar ini, karena selain bermamfaat buat blog dapat juga memperindah tampilan blog. Insyaallah untuk kedepannya, saya akan memberikan Tutorial Blogspot tentang cara buat widget komentar yang simple (Sederhana). Talk less do more, let's practice to make it.

---

Cara Membuat Widget Komentar Avatar di Blogger

---

• Sign In di blogger.com
• Pada Menu drop down, Pilih layout
• Klik Add a gadget dan pilih HTML/JavaScript
• Copy paste kode berikut pada kolom yang tersedia

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_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;}
.tb_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;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<p style="display:none;">Recent Comments Widget with Avatar by <a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a></p>
<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://tutorialblogspot.googlecode.com/files/recentcommentavatar.js"></script>
<script type="text/javascript" src="http://contoh.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

• Jangan Lupa mengganti http://contoh.blogspot.com dengan URL blog sobat,lalu simpan Widget sobat

Tambahan :
Jika sobat blogger memasang komentar Google Plus, maka widget Komentar Avatar ini TIDAK BISA di pasang di blog sobat.