Recent Comment Widget for Blogger with Avatar !!

If you are regular blogger then I am sure that you know the importance comments for a site/blog. A good numbers of comment shows the engagement of the visitors with the site/blog. Using comment widget you can show recent comments of your site/blog. Earlier I had shared a simple recent comments widget. Today I am gonna share another Recent Comment Widget for Blogger. But this one is much better than the earlier one.

• Related Post: Scrolling Recent Posts Widget for Blogger!

The earlier shared widget don't show the Avatar/Image of the comment makers. But this recent comment widget will show recent comments with the Avatar/Image of the comment makers. Not only that you can change the default image for the anonymous avatar as well. Lets see how add this advance recent comments widget to blogger.

Adding Advance Recent Comment Widget to Blogger:

• First Sign Into your Blogger Account and go to Dashboard.
• Then click on Layout option and click Add a Gadget link, where you want to place this widget.
  
  
  
• Then from the gadget list choose HTML/JavaScript.
  
• Now Copy the below code and Paste it in the Content box.


<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/AVvXsEj-_KSF2PI923uCiRwyJMKrdRcK2T4PrOeNmQGsKd9DKdLi7lD5cuao_H2SC89yzDwz1asCbw34A-Ge8wigdC-D4sM6FHEMqIX-l6SX4oLD4OEHndXI3YmEzjDwnGC9ViyeJ4Lapz7-fCRB/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="http://www.ittimesbd.com/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>


• Then click Save button to complete the process.

Customization:

• Replace http://www.ittimesbd.com with you site's Homepage URL.
• By default it will show 5 comments. To show more comment, change numComments  = 5 value.
• To change Avatar size, just change avatarSize  = 60 value.
• To change the Round Avatar to Squire Avatar, Delete following line from the above code.


.avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}


• To change the Avatar for anonymous users, Replace the following URL with the URL of your image in the above code.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-_KSF2PI923uCiRwyJMKrdRcK2T4PrOeNmQGsKd9DKdLi7lD5cuao_H2SC89yzDwz1asCbw34A-Ge8wigdC-D4sM6FHEMqIX-l6SX4oLD4OEHndXI3YmEzjDwnGC9ViyeJ4Lapz7-fCRB/s1600/default-avatar.jpg

That's it. Now view your blog and you will find that this widget is showing the recent comment of your site.

Stay with www.iTTimebd.com for more IT related Post