Add Recent Comment Widget with Avatars to Blogger

In a previous article, I have learned how to add Recent Comments Widget for Blogger.Now in this article, we are moving a step forward that is by adding avatar style to your comments tab. Most readers like this gadget as this makes our blog more stylish and attractive. So in this post, I am going to share with you a stylish recent comments widget having rounded avatars for the commentators. It helps to inspire your blog readers, also helps to increase user knowledge experience of your website. Readers can also see all latest comments on your blog and by this way, they can easily find and ask or reply that comment to other users. In other words, this is the best way to boost the value of a webmaster's site with ease.

I know you will be very thrilled to know the steps, hence let’s move to the tutorial.

How To Add Recent Comments Widget With Avatar??

• Sign In to Blogger Dashboard


• SelectLayout -> Click on Add a Gadget


• TakeHTML/Javascript from the list


• Give the Title and Copy the below code to it and Save

 

 <style type="text/css">
ul.helploggercomments{list-style: none;margin: 0;padding: 0;}
.helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;}
.helploggercomments li .avatarImage {padding: 3px;
background: #fefefe;-webkit-box-shadow: 0 1px 1px #ccc;-moz-box-shadow: 0 1px 1px #ccc;box-shadow: 0 1px 1px #ccc;float: left;margin: 0 6px 0 0;position: relative;overflow: hidden;}
.avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.helploggercomments li span {margin-top: 4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB_JWllkgGk4j_40-0duqAk3kQ42AUlSkRp6yRA04LAaWFdJuw_5zCAj92nIImXiDReX5cv_XQPxkvy9CaNOoANtqU_K4uKb4aSFATJOM0yLeORjayIHRpEZBp7kyVRdaugKH08hfES1g-/s1600/default-avatar.jpg",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/[helplogger.blogspot.com]recent-comments.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="http://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html" rel="nofollow" >Recent Comments Widget</a></div>

Note-

• By default, 5 comments will be displayed, hence to show more replace the “ 5 “ values

in red

• To change the avatar for anonymous users, replace the following address with url of your image

 

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB_JWllkgGk4j_40-0duqAk3kQ42AUlSkRp6yRA04LAaWFdJuw_5zCAj92nIImXiDReX5cv_XQPxkvy9CaNOoANtqU_K4uKb4aSFATJOM0yLeORjayIHRpEZBp7kyVRdaugKH08hfES1g-/s1600/default-avatar.jpg

• Replace the 60 value in green to change the size of the avatar


• Remove the red line to change the appearance to a square.

Click save after making the changes.....are we are done.