Recent Comments Widget with Avatars for Blogger

After successful releasing of Auto Scrolling Recent post widget. As I am very happy for your positive response on auto scrolling posts widget. So today I have another great widget for you. I already shared two recent posts widgets and tons of Social widgets with our readers. That's why today I have Recent Comments widget. There are many recent comments widgets are available on the internet. So that's why i have decided to share something cool and decent with our readers. Today our widget will be Recent Comments Widget with Avatars for Blogger.

Why to Add Recent Comments Widget with Avatars to Blogger 

Comments are also a very important thing to judge a blog. If a blog have 200 posts and have no comments then it will raise alarm to advertisers as well as to new visitors. So If you want to make a good commenting family you must have cool recent comments widget. This widget is perfect for that because of its Avatar feature it can attract new visitors to comment. It also give a professional look to your blog. You can also set an avatar for visitors who don't have any avatar on their profiles or for anonymous users. This widget also shows some of the content of comment.

How to Add Recent Comments Widget with Avatars to Blogger

1. Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/Javascript.

2. Paste the following code in HTML/Javascript box.

 <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="https://widgetbloggiks.googlecode.com/svn/trunk/recentcomments.js"></script>
<script type="text/javascript" src="http://yousite.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

3. Change the highlighted text according to your blog.

4. Now click on save.

Get paid to share your links!