Add Recent Comments Widget with Avatars To Blogger

If in the past tutorial i've talked about a simple Recent Comments widget, now i'll be sharing to you a stylish Recent comments widget with round avatars, which comes along with comment excerpts.
You have the option to change default Anonymous Avatar Image as well.

How to add recent comments widget with avatars

Step 1. Go to Blogger Dashboard, then go to Design >> Page Elements and Add a Gadget.
In the popup window scroll down + choose HTML/Javascript and paste in the following code:

<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.w2b_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;
}

.w2b_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;
}

.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}

.w2b_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 = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggingcreate.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Settings:

- Replace your-blog with the name of your blog.
- Replace the "5" values in red, with the number of comments you want to appear, from:

• numComments  = 5 

and

• &max-results=5 

- To change the anonymous avatar, replace the following address with your own:

• http://www.gravatar.com/avatar/?d=mm 

- To change the size of the avatar, replace 60 value in green with your own

After you've made the changes, click Save... and you're done!

The credit goes to Hrish @ way2blogging.org

Recent Comments Widget For Blogger

The Recent Comments Widget for Blogger displays recent blog comments on your sidebar, showing a snippet of comment along with the title of the post to which the comment was made. If you want to encourage your readers in leaving comments on your blog, this is a widget you shouldn't miss.

How To Install The Recent Comments Widget For Blogger

Step 1. Go to your Blogger Dashboard >> Design >> Page Elements >> Add a Gadget >> HTML/JavaScript.

Step 2. Copy and paste in the HTML/JavaScript box the following code:

<script style=text/javascript src="http://bloggingcreate.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://bloggingcreate.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

Step 3. Replace your-blog-name with your blog url.

Step 4. Click Save and you're done.

Enjoy!