Recent Comments Widget with Avatar For Blogger

This is the first post on this blog. Starting with a beautiful Widget for Blogger. This widget show a list of recent comments with avatar and short summary of the comment. Here I have used CSS3 transition for list, it change the color when it mouse-over on it.

Although this widget makes your blog readers to comment on your blog, because of displaying their profile photo. You can change color by tweaking the CSS code given below. You can add this widget easily into your blog. Follow the steps to add recent comments widget on your blogger.

1. Go to Blogger dashboard and select your blog.
2. Now open Layout and click Add a gadget.
3. Find HTML/JavaScript and open it.
4. Copy-paste the following code into it.

<style>
ul.recent_comments{list-style:none;margin:0;padding:0}
.recent_comments li{background:#fff;display:block;clear:both;overflow:hidden;list-style:none;margin:5px!important;padding:5px!important}
.recent_comments li:hover{background:#BAE0FF;color:#fff}
.recent_comments li .avatarImage{background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;position:relative;overflow:hidden;margin:0 6px 0 0;padding:3px}
.avatarRound{-webkit-border-radius:30px 0 30px 30px;-moz-border-radius:30px 0 30px 30px;border-radius:30px 0 30px 30px}
.recent_comments li img{position:relative;overflow:hidden;display:block;padding:0}
.recent_comments li a{background:#27b;color:#fff;font-size:13px;margin:5px -5px;padding:1px 2px}
.recent_comments li,.recent_comments span{-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s}
.recent_comments li span{margin-top:3px;color:#666;display:block;font-size:12px;line-height:1.4}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 45,
 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://socialvint.at.ua/JS/recent-comment.js"></script>
<script type="text/javascript" src="http://www.yourblog.com/feeds/comments/default?alt=json&callback=recent_comments&max-results=5"></script>

Replace www.yourblog.com with your blog URL. and click Save it. You can customize above code with your preference according to below.

preference	definition
numComments	Number of comments to be displayed in the widget
showAvatar	Want to show the avatar?
avatarSize	Size of the avatar (in px),
characters	Length of the comment's summary or number of character
defaultAvatar	It will appear when there's no avatar for comment

I hope you like this widget. If you face any error in this widget, you can comment it below. Share to your friend too.