Cara Membuat Widget Komentar Avatar di Blog

Cara Membuat Widget Komentar Avatar di Blog

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 bermanfaat buat blog dapat juga memperindah tampilan blog. 


1. Loggin ke blogger --> Tata Letak -->Tambah Gadget --> HTML/Javascript
2. Copy kode di bawah ini:


<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://ilmu-matematika.blogspot.com/">Judul Blog</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://ilmu-matematika.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>


3. Simpan


Catatan:

- Ganti tulisan warna biru dengan jumlah komentar yang ingin Anda tampilkan
- Ganti tulisan warna merah dengan URL blog sobat, lalu simpan Widget
- Jika sobat blogger memasang komentar Google Plus, maka widget Komentar Avatar ini TIDAK BISA di pasang di blog sobat. 


Semoga bermanfaat...