Add Recent Comments Widget With Avatar To Blogger Blogs

In previous post we learnt how can we add recent comments widget to our blogspot blogs that shows the mostrecent comments on blog posts but the main disadvantage is that was have not ability to show commentators avatar so now we are here again to share how to add recent comments widget with avatarto blogger. The main advantage of this widget is engage your readers and increase visitor time. Lets go to know how to add recent comments widget with avatar.

You May Also Read Them.....

• How To Add Recent Comments Widget To Blogger
• How To Change Post A Comment Text in Blogger
• Add Numbers on Blogger Threaded Comments

HOW TO ADD AVATAR TO COMMENTS

• Step 01... Go to blogger dashboard > Layout > Add Gadget, New window open where select "add html/javascript" option.

• Step 02... Paste the following code into the "Html/Javascript Box" name the widget and publish it.

 

<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/AVvXsEgavbtjpg1K-4FHkZPLgmtb0iW5h7pVFWEJtQQMWDmZVgw6IHNRzJBba-yIDhoXiBW8d_uZJOzs4So3uncZTY2MvroiX4styrOsMHnLkjQyDwp7nGqCOnnavKxVpho9XIqxkZcygphzhp3W/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://web4services.blogspot.com/
" rel="nofollow" >Recent Comments Widget</a></div>

You Must Read Them.....

• How To Add Hyperlink in Blogger Comments Form
• How To Hide or Disable Backlinks From Blogger Comments

CUSTOMIZATION

• By default it set to display 5 comments, to increase limit increase "5" value in red.
• By default the avatar of anonymous commentator added to change simply replace the your image url showing in red color.
• To change the size of Avatar change the "60" value.
• Avatar will be displayed in round shape by default, Change the "true" into "false" to display in square shape.
• To shows more words of comments increase "40" value.

The recent comments widget with avatar displays at the sidebar of your blog will be tell your readers that your blog is alive and visitors leave comments on your posts after reading them.

That's All, Enjoy this great widget and get cool comments to show. Happy Blogging.