Cara Membuat Recent Comment dengan Avatar

Cara membuat Recent Comment dengan Avatar di blog, sebelumnya saya sudah share cara membuat recent comment tapi recent comment yang ini jelas berbeda, recent comment yang menampilkan Avatar .


Langsung saja Cara Membuat Recent Comment di Blog :

1.Login ke blog sobat.
2.Pilih Rancangan.
3.Pilih Add a Gadget > Tambah Gadget.
4.Kemudian pilih HTML / JavaScript.
5.Kemudian Copy dan pastekan Code dibawah ini :

<div style="height: 180px; overflow:auto; text-align: left; width: 300px;">
<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 = 10,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://www.andisitorus.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>
</div>

6.Selesai.
Keterangan : Ganti http://www.andisitorus.com dengan alamat Url blog sobat, numComments = 10 : jumlah Comment yang tampil, avatarSize = 30 : atur besar atau kecil avatar nya. Selamat Mencoba!!!
(by post)

Share →

Comments
2 Comments

2 Responses to "Cara Membuat Recent Comment dengan Avatar"