Membuat Recent Comment With Avatar

Tutorial selanjutnya adalah membuat recent comments yang dilengkapi dengan gambar avatar. widget ini biasanya dipasang disidebar. kegunaan widget ini mengingatkan pada pemilik blog akan komentar yang masuk jadi sebagai pengingat juga untuk membalas komentar dari pengunjung pada blog kita.
Jika sebelumnya saya memposting Cara Mengembalikan Recent Comment With Avatar Dengan Recent Comment Bawaan Blogger, maka sekarang sobat akan saya tunjukkan Membuat Recent Comment With Avatar.
sobat penasaran, seperti apa bentuk recent comments dilengkapi dengan gambar avatar itu. lihat gambar dibawah ini :

Bagaimana?? sobat tertarik ingin membuatnya. Baiklah, saya akan memberikan tutorial cara membuatnya.
Langkah-langkahnya seperti berikut ini :

• Login ke akun blogger sobat.
• Pada Tata Letak ➨ Tambah Gadget (saya sarankan di bagian paling bawah dan jangan di beri judul)
• Pilih HTML/Java Script ➨ Setelah itu copy kode berikut dan paste atau 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://onetroverlight.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=7"></script>

• Save dan lihat hasilnya.

NOTE : silahkan ganti kode yang berwarna merah dengan url blog sobat. angka 5 (Num comments = 5) adalah jumlah komentar yang akan ditampilkan. silahkan anda melakukan penyesuaian sendiri.

..: SELAMAT MENCOBA :..

Get free daily email updates!

Follow us!

[Get this widget]