AABI‍TALITA BLOG
1.02.2013

Membuat Widget Recent Comments Dengan Avatar


Recent Comments widget dengan Avatar untuk Blogger / Blogspot. berfungsi untuk menampilkan komentar terakhir dengan hadirnya fitur baru yaitu Threaded Comments, maka Blogger juga mengubah Comments API yang memungkinkan menampilkan avatar pada widget Recent Comments.

Script untuk menampilkan avatar pada komentar terakhir ini dibuat oleh Harish. Seperti apa tampilan recent comments dengan avatar sobat bisa lihat pada gambar di bawah ini atau pada widget komentar sahabat diblog ini.


Untuk penbuatannya sobat bisa ikuti langkah langkahnya :
1. Login ke blog Sobat.
2. Pilih Tata Letak > Add Gadget > HTML/Java Script
3. Masukan Kode berikut ke dalamnya dan untuk judul terserah Sobat.
<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  = 30,
 roundAvatar = true,
 characters  = 30,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwa.js"></script>
<script type="text/javascript" src="http://abitalita.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Keterangan :

numComments  = 5, (jumlah komentar yang ditampilkan)
showAvatar  = true,
avatarSize  = 30, (ukuran avatar dalam pixel)
roundAvatar = true,
characters  = 30, (jumlah karakter yang ditampilkan)
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", (url avatar)
hideCredits = true;


Sobat bisa menggantinya sesuai selera

4. Ganti  abitalita.blogspot.com dengan URL  blog sobat, ganti max-results=5, sesuai jumlah komentar yang ingin ditampilkan.

5. Simpan dan lihat hasilnya.

3 komentar

Kreatif post mas brow.

tahnks mas sdh berkunjung..:)

File http://btreaders.googlecode.com/files/rcwa.js sudah dihapus (404 not found)

Aku sudah membackupnya ke https://mzaini30.github.io/library/js/rcwa.js

Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.