Cara Membuat Recent Comment Dengan Profil /Avatar

Recent Coment Adalah widget yang akan menampilkan beberapa komentar terakhir di blog kita.Dengan adanya recent comment ini memudahkan kita untuk mengetahui teman  yang sudah komentar di artikel kita tanpa takut terlewatkan untuk kita balas,.

Widget ini sangat membantu bagi kita yang tidak menggunakan moderator komen, karena tanpa mengecek moderator komen kita sudah dapat mengetahui siapa saja yang baru saja kometar di artikel kita,karena komentar yang baru akan tampil di bagian atas.

Disini saya akan memberikan cara membuat recent comment yang menggunakan gambar kita atau profil avatar.Dengan adanya Avatar atau foto profil komentator di dekat tulisan komentar, membuat Recent Comments with Avatar ini lebih menarik di bandingkan Recent Commnets biasa yang tidak menampilkan avatar profil komentator.

Oke langsung saja,Caranya sangat mudah,ikuti langkah-langkah berikut;

• Tambahkan gadget baru.
• Pilih widget yang HTML/java script.
• Masukan script yang ada di bawah.
• Save dan selesai.

<div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;">
<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  = 100,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 200,
 defaultAvatar  = "",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/harysuka/top-comentar/Recent_Comments.js?attredirects=0&d=1"></script>
<script type="text/javascript" src="http://harysukasuka.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script>

Jika sobat mau,kode untuk membuat recent coment dengan gambar ini masih bisa di edit kembali.Silahkan sobat edit kode yang berwarna BIRU agar tampilannya sesuai dengan yang anda inginkan;

• 250px adalah tinggi kotak Recent Comments. Ganti 250 dengan angka yang lebih jika anda ingin membuat kotak yang lebih tinggi atau sebaliknaya asala jangan menghilangkan kode px 
• fff adalah kode untuk background kotak. fff adalah kode warna putih. Apabila ingin mengganti background kotak Recent Comments dengan warna lain, ganti fff dengan kode warna yang anda inginkan. Untuk melihat kode warna,sobat bisa gunakan halaman ini "cara membuat kode warna". 
• 100 adalah jumlah komentar yang akan di tampilkan di dalam kotak Recent Komentar. Ganti 100 dengan angka yang lebih besar atau lebih kecil sesuai keinginan anda.
• true yang pertama adalah kode untuk menampilan Gambar Avatar profile. Jika ingin menghilangkan Foto Profil / Avatar, ganti true dengan false
• 30 adalah ukuran / besar foto profil. Sama seperti sebelumnya, ganti 30 dengan angka yang anda inginkan.
• true yang kedua adalah kode untuk membuat foto profil komentator berbentuk bundar. Ganti true dengan false jika anda ingi membuat avatar profil berbentuk kotak .
• 200 adalah jumlah karakter / huruf komentar yang akan di tampilkan. Silahkan ganti angkanya sesuai dengan yang anda inginkan.
• ini adalah bagian yang paling penting. Ganti http://harysukasuka.blogspot.com dengan URL / alamat blog anda agar widget Recent Comments yang ada di blog anda tidak menanmpikan komentar yang ada di blog saya 

Itu dia sobat,cara membuat recent coment dengan menggunakan gambar / avatar.
Bagaimana.? Apakah sobat tertarik..??