cara membuat widget kotak komentar keren dengan efek hover

lihat gambar berikut...

ini caranya......

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih->Tata letak->Tambahkan gadget-> HTML/Javascript
  
  
  
  • Kemudian kopi dan pastekan kode berikut didalamnya:
  
  

<style>
ul.bloggerspiceRC{list-style:none;margin-top: 10px;;padding:0}
.bloggerspiceRC li {
background: none repeat scroll 0 0 transparent !important;
clear: both;
display: block;
list-style: none outside none;
margin: 0 !important;
overflow: hidden;
padding: 0 0 4px !important;
position: relative;
}
.bloggerspiceRC li a {
background: none repeat scroll 0 0 #E60066;
color: #FFFFFF;
float: left;
font: 12px Arial;
margin-top: 10px;
padding: 25px 10px 5px;
width: 200px;
}
.bloggerspiceRC li a:hover{background:#A10048}
.bloggerspiceRC li .avatarImage {
float: left;
margin: 0 0 0 5px;
overflow: hidden;
position: relative;
}
.avatarRound {
background: none repeat scroll 0 0 white;
border: 1px solid #CC0099;
border-radius: 49px;
height: 50px;width: 50px;}
.bloggerspiceRC li img{padding:0;position:relative;overflow:hidden;display:block}
.bloggerspiceRC li span {
background: none repeat scroll 0 0 #47006B;
color: #FEFEFE;
display: inherit;
float: left;
font: 12px Trebuchet MS;
padding: 5px;
position: absolute;
left: 55px;
top: 5px;
}
.bloggerspiceRC span{display:none}
/*Widget kotak komentar terbaru menakjubkan by www.jalu-pangna.blogspot.com*/
</style>
<div class='widget-content'>
<script type='text/javascript'>//<![CDATA[
function bloggerspiceRC(e){var t;t='<ul class="bloggerspiceRC">';for(var n=0;n<numComments;n++){var r,i,s,o;if(n==e.feed.entry.length)break;t+="<li>";var u=e.feed.entry[n];for(var a=0;a<u.link.length;a++){if(u.link[a].rel=="alternate"){r=u.link[a].href}}for(var f=0;f<u.author.length;f++){i=u.author[f].name.$t;s=u.author[f].gd$image.src}if(s.indexOf("/s1600/")!=-1){s=s.replace("/s1600/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s220/")!=-1){s=s.replace("/s220/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s512-c/")!=-1&&s.indexOf("http:")!=0){s="http:"+s.replace("/s512-c/","/s"+avatarSize+"-c/")}else if(s.indexOf("blogblog.com/img/b16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI8eKyRZujUGsHl5uplmSiXnimtxb16GvPTigBoir9CQiXBjBC0UtMcrXk0_U-cSNWD9e7-lSx8VGEDkteVnNW3lUWjCMKFkDAE_hYgkAWKL0xKQiYVsKspVYSUabweakVLBEZLjO8OW1S/s320/BS+blogger+logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLOzDW78ajKrsRGZatLq3xA7KIuHTCPnVICvszFBztFR5RbUcLNV10Gwirpy7bjsQ7on5EOn0O_mMKenS-IIpq8PS2uol6jy0IxIY5WWiKFJXaVKEOnD6Ao2hVeChswUhuzd16i6tmSmj/s320/BS+openid+logo.png"}else if(s.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){s=defaultAvatar+"&s="+avatarSize}else{s=defaultAvatar}}else{s=s}if(showAvatar==true){if(roundAvatar==true){o="avatarRound"}else{o=""}t+='<div class="avatarImage '+o+'"><img class="'+o+'" src="'+s+'" alt="'+i+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'}t+="<span>"+i+"</span>";var l=u.content.$t;var c=l.replace(/(<([^>]+)>)/ig,"");if(c!=""&&c.length>characters){c=c.substring(0,characters);c+="&#8230;"}else{c=c}t+='<a href="'+r+'">'+c+"</a>";t+="</li>"}t+="";document.write(t)}var numComments=numComments||8,avatarSize=avatarSize||34,characters=characters||26,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdlwqxi3BC1frjWKPv0cs7qx3-__x1y7jfGrVaLfFGh77nl5nXU91jsslGGtjNxMM5vKmqoD7TngDVA3iiofTWjhczobXbud-dMidgubX-yMUbnp7jZgQM9jGsASsld8qfF9UwK0M8ENj/s320/BS+avatar.png",showAvatar="undefined"===typeof showAvatar?!0:showAvatar,roundAvatar="undefined"===typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"===typeof hideCredits?!1:roundAvatar
//]]></script>
<script type="text/javascript" src="http://jimi-jimey.logspot.com/feeds/comments/default?alt=json&callback=bloggerspiceRC&max-results=5"></script>
</div> 

KUSTOMISASI 

• Ganti jimi-jimey.blogspot.com dengan alamat URL blog anda  
• Angka 5 digit untuk menampilkan berapa banyak komentar yang ingin anda tampilkan 
• height: 50px;width: 50px;  untuk menampilkan ukuran tinggi dan lebar gambar
• Yang lainnya bisa anda kreasikan sendiri