Membuat Recent Comment Widget dengan Avatar di Blogger

Mungkin sudah biasa widget Recent Comment (komentar terakhir) pada blogger umumnya menggunakan widget bawaan pada blogspot itu sendiri, akan tetapi widget itu sekarang sudah berkembang menjadi widget recent comments yang disampingnya terdapat gambar si pengunjung yang berkomentar atau dengan avatar.

Widget ini sendiri dikembangkan oleh Harish yang memiliki blog yang namanya Way2blogging dengan sedikit pengcodingan maka dihasilkanlah widget recent comment yang memiliki avatar. untuk cara pembuatannya sobat bisa melihat caranya dibawah ini.....

Preview :

Code

<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 = 3,
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://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://gogorontalo.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Note :

• Letakkan kode diatas dengan membuat widget Html/Javascript baru di blogger
• Gantilah kode berwarna merah sesuai selera anda dengan penjelasan sebagai berikut :

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;

<script type="text/javascript" src="http://gogorontalo.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

• Ganti link http://gogorontalo.blogspot.com dengan alamat url blog sobat

Semoga bermanfaat....

Artikel Terkait Lainnya :