Recent Comments Dengan Gambar Avatar

Kali ini saya akan mencoba sharing tentang Recent Comments Dengan Gambar Avatar.
Recent Comments atau Komentar Terbaru ini menggunakan gambar avatar, maksudnya foto atau gambar si pengoment di blog akan terlihat fotoya, dan fotonya berbentuk gambar bundar.
Recent Comments Dengan Gambar Avatar ini tinggal sobat pasang di widget atau slidebar blog sobat, dan sobat hanya perlu menambahkan elemen HTML/Java Script di elemen gadget.

Kita lansung aja bahas canya:

Cara memasang Recent Comments Dengan Gambar Avatar :

1. Masuk ke akun blogger sobat.

2. Pada menu sobat klick Rancangan ➨ Tambah gadget.

3. Lalu sobat pilih elemen HTML/Java Script.

4. Selanjutnya sobat copy kode script di bawah ini dan letakkan di dalamnya.

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

5. Simpan.

Keterangan:
Ganti http://www.otowebsite.blogspot.com dengan url blog sobat.
 numComments  = 5, ➨ Angka 5 enunjukkan jumlah komentar terbaru yang akan di tampilkan.
Kode di atas masih ada yang bisa di rubah, silahkan sobat ganti sendiri.

Saya rasa cukup untuk kali ini, somoga postingan kali ini bisa bermanfaat untuk sobat semua.

Silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!