Tampilan comment yang keren dengan avatar profile

Sekarang saya akan memposting "how to make recent comment with avatar profile"

Sebenarnya recent comment akan menampilkan komentar-komentar terakhir di blog  dan jumlahnya diatur sesuai dengan ke'inginan sang blogger sendiri,dan dengan adanya foto atau avatar yang berada di dekat komentar membuat recent comment menjadi lebih menarik ketimbang komentar-komentar yang biasanya ditampilkan,

untuk contohnya silahkan lihat di bawah..!!

lha sekarang How to make it..??

• Masuk blog anda duu..!!
• Pilih tata letak!
• Tambah gatged!
• pilih java script/html!
• isikan dengan script berikut..!

<div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; 
padding:10px; margin:0 auto;background:#blink;">
 <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/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>
 <script type="text/javascript" src="http://rhisza3.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script>

 <div style="font-size:10px; padding:3px;margin-bottom:5px;float:right"><a 
 href="http://rhisza3.blogspot.com/" target="_blank"> Get This Widget</a></div>
 </div>

Keterangan:

1. warna coklat adalah tingginya dan bisa diganti dengan kehendak sang pemilik blog
2. warna hijau adalah jumlah komentar yang ditampilkan
3. warna merah adalh ukuran avatar dan bisa diganti
4. warna biru adalah karakter yang diperbolaehkan untuk ditampikan
5. Ubahlah yang berwarna putih dengan blog anda..!!

Selesai deh...!! kalo ada pertanya'an silahkan komen di bawah ya..!!

==TERIMAKASIH SEMOGA BERMANFA'AT==

--HAPPY BLOGGING..!!--