Add Recent Comments Widget with Avatar to Blogger

In one of my previous tutorials, i have posted about most commented posts widget for blogger which have ability to show most commented posts of your blog. but today i would like to share another tutorial related to comments is that Recent comments with avatar widget for blogger blog. which helps your readers to fine out latest comments of your blog posts. Main advantage of this widget is that it shows avatar image of commentator in rounded shape.

Well, originally this widget was designed by harish dasari ( founder of way2blogging.org ) and now it is available to get this widget on many blogger widget niche websites and i would like to re-share this widget in this blog with my readers as well.

So, if you would like to have this beautiful widget on your blog then you have to just follow the simple steps given below.

How to Add Recent Comments with Avatar Widget to Blogger ?

To adding this widget to your blog, firstly, go to Blogger dashboard > Select your blog > Layout > Click Add a Gadget link > Then Choose “HTML/Javascript” from the list.

Now, copy and paste following code into it.

<style type="text/css">
ul.md_recent_comments{list-style:none;margin:0;padding:0;}
.md_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.md_recent_comments 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;}
.md_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.md_recent_comments 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    = true,
moreLinktext    = "More »",
defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://makingdifferent.github.com/blogger-widgets/md-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://www.bloggerwidgetgenerators.com/feeds/comments/default?alt=json&callback=md_recent_comments&max-results=5"></script>

Now, Replace “http://www.bloggerwidgetgenerators.com” with your blog URL and save the widget.

You can customize all other settings according to your need by editing into JavaScript code above, You are enable to change number of comments to display, show avatar images or not to show, etc.

if you are not familiar with the JavaScript code or if you don’t want to be bothered with such codding then here is an another way of adding this widget using Blogger Widget Generator

All you have to do is just go to Recent Comments with Avatar Widget Generator page. There you will see a generator that you have to fill up required data and customize settings using generator according to your need. and simply click on “Generate” button to enable “Add to Blogger” button. then finally, click on “Add to blogger” button to add this widget to your blog.