Membuat recent comment dengan gambar

  Apa itu recent comment? Recent comment adalah widget untuk menampilkan komentar terbaru dari pengunjung blog. Sekarang juga sudah banyak blog yang menggunakan widget ini, termasuk blog saya. Pembuatannya juga mudah. Langsung saja ke T.K.P....

.::Membuat Recent Comment (Tidak menggunakan scrool)::..

Live DEMO

1. Sign in blog
2. Template Edit HTML -> Centang Expand template widget.
3. Cari kode ]]></b:skin>
4. Copy kode berikut, diatas kode no.3


ul.tb_recent_comments{list-style:none;margin-top:15px;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;}


5. Cari kode </head>


6. Copas kode dibawah ini, diatas kode no.5


<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 7,
showAvatar  = true,
avatarSize  = 30,
characters  = 60,
defaultAvatar  = "http://1.bp.blogspot.com/-LCtABolbUDQ/T4c5vHX7AuI/AAAAAAAAAGw/bAKjTt-BsVI/s1600/avatar.png",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://zona-fathur.googlecode.com/files/cammentavatar.js"></script>

KETERANGAN (Klik kiri, lalu seret untuk membaca).

1. NumComments = 7, Jumblah post comment yang ditampilkan.
2. AvatarSize = 30, Ukuran avatar/gambar yang ditampilkan.

3. Characters = 60, Jumblah huruf yang ditampilkan.

7. Save Template


8. Tata letak -> add gadget -> HTML/Java Script.


9. Copy kode dibawah ini.


<script type="text/javascript" src="http://ALAMAT BLOG ANDA.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=7"></script>


10. Save.