How to Add Recent Comments Widget with Avatars?

Whenever readers/visitors find any difficulty or posts suggestions or criticize about blog articles simply comments on blog. Webmaster should note all these comments by replying simple and attractive methods.
To flavor this Recent Comments widget you’ve to modify by using BlogTariff tutorials to look Comments widget with stylish and attractive. This widget is bloggercentral for all webmasters in converting readers/visitors views into comments.
Whenever readers/visitors comments on blog their profile image will be displayed, if readers/visitors avatars not available then default Anonymous image apprars. BlogTariff presents simple way of CSS code for “Recent Comments Widget with Avatars” webmasters don’t need to work hard for adding this widget their blogs. Let’s begin the tutorial how to add.

Add Recent Comments Widget with Avatar for Blogger

Sign into your blogger account
Click on “Design (Layout in the new blogger interface) Pageelements link tab
Click on “Add a Gadget” link tab
Select “HTML/Javascript” widget
Now, copy the below code and paste in it

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

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

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

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

.btf_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  = 50,
 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://blogtariff.googlecode.com/files/btf_recent_comments_with_avatars.js"></script>
<script type="text/javascript" src="http://Your Blog URL/feeds/comments/default?alt=json&callback=btf_recent_comments&max-results=5"></script>

Customization

• If you need to change Avatar image size then replace “50” with your value as in Pink
• Replace “Your Blog URL” with your blog name
• Replace “5” value with your choice value comments want to appear as highlighted I red
• If you need to change Anonymous avatar image then replace http://www.gravatar.com/avatar/?d=mm with your image Url

After all replacements now, “Save Your Widget” and Template.