Recent Comments Makin Hidup dengan Avatar

Dengan Blogger meluncurkan feature Threaded Comments maka saat ini memungkinkan untuk memunculkan avatar di kolom komentar, apa hanya sampai disitu saja? Ternyata tidak, dengan adanya feature tersebut juga membuat avatar bisa muncul di widget recent comments yang telah sedikit dimodifikasi. Untuk penampakannya kurang mirip seperti di footer blog kelincex.com :D

Bagaimana terlihat lebih hidup kan dengan penampakan kreatif seperti itu :D
Sooooooo...akhirnya ikan sepat ikan gabus, makin cepat makin bagus, hehe. Makin bagus buat belajar ikutan bikin kayak gitu terus dikembangkan sendiri.

Step by Step...

Halahhhhh ngga perlu step by step segala, wong mudah banget kok cara pasangnya. Tinggal masuk ke tab layout » Add a Gadget » HTML/JavaScript lalu masukan kode ini:

<style type="text/css" scoped>
ul.alembana_recent{list-style:none;margin:0;padding:0;}
.alembana_recent li{background:none !important;margin:0 0 6px !important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.alembana_recent li:hover{border: 1px solid #ddd;}
.alembana_recent a {text-decoration:none;}
.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;width:35px;height:35px}
.alembana_recent li span{margin-top:4px;color: #222;display: block;font-size: 11px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
var
numComments = 5,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=40,
adminBlog='Alembana Latera Luskrin';
//]]>
</script>
<script type="text/javascript" src="https://alembana-recent-widget.googlecode.com/svn/recent-indriani.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=alembana_recent&&max-results=40">
</script>

Untuk membuat tampilan berbeda dan lebih kreatif, maka editlah CSS diatas. berikut sedikit petunjuk kostumisasinya:

numComments = 5 (jumlah komentar yang ditampilkan)
showAvatar = true (false, apabila ingin menyembunyikan avatar)
avatarSize = 35 (ukuran avatar dalam pixel)
roundAvatar = true (avatar bulat)
characters = 40 (jumlah karakter isi komentar)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
adminBlog='Alembana Latera Luskrin' (nama admin blog, wajib disesuaikan)

oke sekian dulu semoga bermanfaat ;)