Stunning Latest Comment Box Widget with Rounded Avatar

Hi friend I have just designed a new stunning latest comment box widget with rounded Avatar which is unique. I have added hover effect on message of commentators and rounded avatar at the left site of the widget. You will also see the blocked name of the commentator. Hope this comment widget will help to display your latest comment with different flavor. You can add this latest comment widget on black or white color background. But one thing you have to remember that if you want to set this comment on your blog sidebar or footer that must be 320px wide otherwise it won't match with the gadget. So kindly use this comment box on 320px wide sidebar or footer bar. 

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<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}
/*Comment widget by www.bloggerspice.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/AVvXsEjlgGDcSMzvEoAYt9xK9X9lKVojEO6gtgdZbYyP9luG-4cFXd1BjFY5OFi8B1hv6h2AuLpRm0oqx_hhaWuzjU7yI__sVC9Jv5gby04SriZ0TIXvwmFM_oatLEZaZ_VgYBUZeWN1wM-48F8b/s320/BS+blogger+logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCYiq8m2972ichsjDmcFg1YXo5eeZxkXe1ZJLNvxO9b7vIymgf7UaxOc1mnxw2ti74KGIAK9cwt92JJ2HJB4ko8ggl2pp4097LnYhAAfctaWVDxho2eehvQU9iockUZch2gV3VS2gwNX08/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/AVvXsEijON39ck6ixZwfusdZEZsek_6bWqasLY_iGMJkSZnnpl8-VfDouoJ7V-XsQLE4PLaZ50t_kSCxYNEE2JEECLMOuTzqNZRw4Dsif-RY6E_B5IFkE65yPXcg3kjiIclsDgcaAT_9pqRjw2YL/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://bloggerspice.com/feeds/comments/default?alt=json&callback=bloggerspiceRC&max-results=5"></script>
</div>

Customization

• Change bloggerspice.com with your blog address. 
• Change 5 to show how many comments you wants to add.
• Alter height: 50px; width: 50px;to change the image height and width.