Adding A Recent Comment Widget With Avatar For Blogger Blog

Adding a recent comment widget with avatar for blogger blog.This new widget will give a whole new look to your blog.Some days ago Blogger updated its comments API for threaded comments and install threaded comments option in blogger blogs.So in this new updated comments API blogger also adds a feature of Avatar in blogger comments.With the help of this updated API i created a recent comments widget with Avatar for blogger/blogspot blogs.This widget looks very cool and the look is also very good for your blog and the best feature is it works fine with all type of templates weather it is default or its custom blogger templates.

In this widget i also included the comments excerpts and avatar image, you can choose default anonymous Avatar Image also.

For seeing a live demo of this widget click on the "Live Demo" button below and check hows this widget works and look.

How To Add A New Recent Comments Widget With Avatar

Step1.) Login to your Blogger account.

Step2.) Now go to your Dashboard > Click On Design.

Step3.) Now in the right side bar click on the "Add A Widget" link for adding a gadget.

Step4.) Now a pop-up window comes with lots of gadget, so choose HTML/Javascript gadget.

Step5.) Now copy the code from below and paste it in HTML/Javascript gadget.

<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 = 6,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
defaultAvatar = " https://lh3.googleusercontent.com/-0XTw-gDaSA4/Tw8LmBXfDxI/AAAAAAAAAgs/hDWDTWDzNjI/s50/icon_author.jpg ",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://www.tekleisure.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script><div style="float:right; font-size:10px;"><a href="http://www.tekleisure.com">Get This Widget</a></div>

Note: Now change the code highlighted in yellow color for increasing or decreasing the number of comments to be shown, and change the code highlighted in green color for changing the default avatar image, and most important change the code in red color and add your website url (www.yourdomain.com or www.yourdomain.blogspot.com) for getting your blogs comments.

Step6.) Save the widget.

Now your recent comment widget with Avatar is ready and check it hows it looks on your blog.If you find any difficulty in installing this code in your blog leave your quires and questions in comments below.