Recent Comments Dengan Avatar

Tutorial selanjutnya adalah membuat recent comments dilengkapi dengan gambar avatar cantik. widget ini biasanya dipasang disidebar seperti pada blog saya. widget tersebut mengingatkan pada pemilik blog akan komentar yang masuk jadi sebagai pengingat juga untuk membalas komentar dari pengunjung kita hehe. mau tahu cara bikinnnya. berikut caranya :

Klik Gambar Untuk Memperbesar

Step - Stepnya :

• Login ke akun blogger sobat.
• Pada Dasbor klick Rancangan ➨ Tambah Gadget (saya sarankan di bagian paling bawah dan jangan di beri judul)
• Lalu sobat pilih HTML/Java Scrip ➨ 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://www.yaqindlive.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=7"></script>
  
  
• Save

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

Bagaimana cukup mudah bukan pemasangannya di blog anda. jangan lupa untuk menuliskan komentar jika anda merasa kurang paham terhadap artikel blog ini.

..: Semoga Bermanfaat :..