Cara Membuat Widget Recent Comment Dengan Avatar

Recent comment, yaitu widget yang menampilkan komentar-komentar terbaru dari blog kita. Karena biasanya sebuah blog identik dengan person sehingga tulisannya itu berasal dari pemikirannya dan bisa dikomentari orang lain. Selain itu akan menambah semangat untuk berkomentar dan menghargai komentarnya.

Untuk itu, kali ini juga piper comex akan membahas cara membuat Recent Comment yang lebih menarik, mengapa? Karena recent comment yang akan kita buat bisa menampilkan avatar si komentator, kalau yang biasa melihat di blog yang ada di wordpress, ya seperti itulah tampilannya. Jadi akan ada avatar (gambar) nama, dan isi komentar. Tentunya widget ini akan membuat tampilan blog lebih menarik. Langsung saja kita praktekan!

Cara Membuat Recent Comment Avatar.

1. Login ke akun blogger.com

2. Pilih Tata Letak lalu tambahkan Tambah Gadget > HTML/Javascript

3. Kemudian masukan kode berikut 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;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.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>

<script type="text/javascript">

//<![CDATA[

    // Recent Comments Settings

    var

numComments  = 4,

showAvatar  = true,

avatarSize  = 50,

characters  = 60,

defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

//]]>

</script>

<script type="text/javascript" src="http://johnytemplate.googlecode.com/files/recentcomment.js"></script>

<script type="text/javascript" src="http://catatan-piper-comex.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

4. Sebelum disimpan ganti http://catatan-piper-comex.blogspot.com dengan URL blogmu sendiri. numComments=4 adalah banyaknya komentar yang akan ditampilkan, avatarSize= 50 adalah ukuran avatar dan characters=60 adalah banyaknya karakter komentar yang akan muncul.

5. Simpan jika sudah selesai.