Stunning Latest Comment Box Widget with Rounded Avatar
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.
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/AVvXsEiK_XnTCDPFI6XE2aPOlM_QPv0ViYg8yljSF_VDyg7J17DQ-WvVosvVfxVxXzmYG9rJeZVo9S5iHuflwWWIrCQ40keihpx4VUQ72qAKPtEc-WBZ_nuq3HpnvJjVNun8mlsy4qOr4AqIesrm/s320/BS+blogger+logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1K-bO4QLOC7-LcHRhjCcZJIF5pB_WNRysCbaBEWFw-8itSEIGtR7u2EJ7SXSxponf_D49DXt94vbEkM9Nt-Yusrj19Vx3dPsa5GNw9epWMPyPFlQ1dzwZCismFzR_zDkN0O0ZuBpKIDE4/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+="…"}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/AVvXsEha2mehTIGE8C0BGNivqLiLDDS3EixQPEM5CCblfsmzQTo-yJcYFJyPV1I7pdpgZDzVX3MpLKHN7u0K8JFtQtx2VvGP6-OofrYd0n5twh7g7phGH9VqRSAkbD-tg_hOx6_AFyYhW_rOJIa9/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.
2 comments
I like it very much. You are rocking bro.