Widget kotak komentar terbaru menakjubkan dengan efek hover

Widget kotak komentar terbaru menakjubkan ini telah ditambahkan efek hover dan gambar avatar yang bulat disebelah kirinya. Anda juga akan melihat blok nama dari para komentator. Semoga saja widget kotak komentar terbaru ini akan membantu untuk menampilkan komentar terbaru Anda dengan rasa yang berbeda. 

 
Anda dapat menambahkan widget komentar terbaru ini pada background warna hitam atau putih. Tapi satu hal yang Anda harus ingat bahwa jika Anda ingin membuat komentar ini pada sidebar blog atau footer harus 320px lebarnya (width) jika tidak maka tidak akan cocok dengan gadget. View demonya bisa anda lihat pada gambar diatas.

• 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/AVvXsEj0Pl4ZHgWAtNyWNyQVPsKJzYgT_2AM1eYo3NtgjpQAWom37kwjGyX5QRRGhyphenhyphenquQBqKYF1qNXlsgrZVXtRCGk_d0TYnDlxqDK-p6IYf_dli1yo5ViC7FFSsQ-qgJyCW_SfRxzstfDmpY8a8/s320/BS+blogger+logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKilM8L-gqvdRb1_2H2nVsnqrNvqIDS1Fl-SJ4FFzm4qlJTJi1CpZVEhQRYfLwF17p-b2KzJ34YZKUR4poAG8UxpxCSkM0Xr4WgwxhehA7R7OklnuylM9I3isI3E6jb4t1e7cQd6T9U00V/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/AVvXsEheTeF7Lcq4mwwba2P-uOaD5_zRriS7br76fbLZXMZqRFP57Bebez4GAh0cWBkYEWcco__i0ZKhXJdORsG0-E3KhS95BDa9zkWJwJkwFVrTgDT3PyX0qJ9N_UxzGIXlgWhVnFBcCPhu3M1i/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://jalu-pangna.blogspot.com/feeds/comments/default?alt=json&callback=bloggerspiceRC&max-results=5"></script>
</div>

KUSTOMISASI 

• Ganti jalu-pangna.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

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 00.42