Tricky & Tipsy Friend

Selamat malam, saya akan memberitahu tutorial mempercantik recent comment dengan memberikan Efek Avatar Dengan Tooltip, dan tidak usah mengedit HTML, kita hanya menambahkan Widget.

Berikut cara memasang Widget Recent Comment With Avatar :

Pertama anda login ke akun blogger.com,
Setelah login silahkan arah ke Tata Letak, Setelah itu Pilih tambah Gadget :)
Dan masukan kode dibawah ini dikolom Widget !!

<script type='text/javascript' src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<style type='text/css'>
/* Beauty Recent UWI Comments */
#komentar {margin:0;padding:0;background:transparent;box-shadow:0px 1px 3px #800080;box-shadow:inset 0px 0px 5px #800080;
border: 2px solid rgba(255, 255, 255, 0.03);}
#komentar ul{margin:0;padding:0px;list-style: none;}
#komentar ul li:first-child {border-top:none;}
#komentar ul li {height:46px;border-bottom:1px solid rgba(255, 255, 255, 0.03);border-top:1px solid rgba(255, 255, 255, 0.03);padding:2px 0;list-style:none;}
#komentar ul li:last-child {border-bottom: none;}
#komentar ul li:hover {background-color:#a52a2a;}
#komentar a, #komentar a:link, #komentar a:visited {clear:both;color:#222;display:block;text-decoration:none;}
#komentar .gamen {display: block;float: left;height: 42px;left: 4px;margin-right: 15px;position: relative;width: 42px;}
#komentar .gamen>img {border: 2px solid #0000ff;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;box-shadow: 0 1px 2px #222222;}
#komentar ul li div.ismen {color:#0000ff;text-shadow:-1px -1px 1px rgba(255, 255, 255, 0.03);}
#komentar .ismen {display: block;font-size: 1.2em;font-style: italic;line-height: 1.2;padding: 2px 4px 2px 0;}
#komentar .gamen>span{width: 120px;height: auto;line-height: 20px;padding: 5px;left: 115px;margin-left: -64px;font-size: 1em;font-weight:bold;color: #fff;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 4px solid white;background:darkred;text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 450px;opacity: 0;box-shadow: 0px 0px 4px red;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#komentar .gamen>span:before, #komentar .gamen>span:after{content: '';position: absolute;bottom: -15px;left: 50%;margin-left: -9px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0,0,0,0.1);}
#komentar .gamen>span:after{bottom: -14px;margin-left: -10px;border-top: 10px solid white;}
#komentar .gamen:hover>span{opacity: 0.9;bottom:50px}
  </style>
<script type='text/javascript'>//<![CDATA[
var jmlkomentar = 5;
var jmlkarakter = 80;
//]]>
</script>
<div id='komentar'>
<ul><script type="text/javascript" src="http://hezron4shared.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script> </ul>
</div>

Setelah itu anda save !

Mudahkan ? Saya saja membuat membutuhkan waktu paling lama satu  menit
yang pengen mencoba langsung saja dipraktekan !

NB : Tulisan Berwarna Merah Silahkan anda ganti dengan nama blog anda, dan yang pengen otak-atik scriptnya silahkan saja :)