Membuat Recent Comment untuk Blog

   Kini platform blogger memungkinkan pengguna untuk menampilkan avatar dalam widget recent comment.

   Apa itu widget recent comment? Secara singkat, widget recent comment ini digunakan untuk menampilkan comment - comment terbaru yang ditulis pengunjung di blog kita pada post tertentu.
   Kenapa memasang wdiget ini? Salah satu alasannya ialah agar kita tidak kesulitan melihat comment terbaru yang diberikan pengunjung jika post kita banyak dan kita tidak mungkin melihatnya satu per satu di post. Meski ada pengaturan komentar yang sudah tersedia di blogger, tapi tidak ada salahnya menambah widget ini untuk memberi nilai lebih pada penampilan blog.

Berikut ini screenshot sedikit bagian dari recent comment :

Untuk membuat widget yang buatan way2blogging.org ini,
1. Login ke Blogger --> Tata Letak.

2. Pilih Tambah Gadget, letaknya sesuaikan dengan yang anda inginkan. Lalu pilih HTML/Javascript.
3. Masukkan kode berikut ini.

<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 = 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://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://urlblogAnda/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Ganti kode yang berwarna hijau untuk mengubah display widget.


5. Klik Simpan dan widget telah ditambahkan.

Semoga bermanfaat... :-)