Stylish Recent Comments Widget For Blogger blog With Avatar

Recent comments widget is very necessary for a new blog which you want to run for long time. This widget will surely help you to check out the recent comments on your blog sidebar but not only you it can also be seen by your visitors.Visitors can check who one recently comment on your blog directly by looking on the widget. The avatar in front of the name help you to surely recognizing the person without clicking on its name.



Also Read : How To Add Icons In Blogger Navigation Menu
How to add stylish comments widget in blogger?

• Go To Blogger >> Dashboard >> Layout 
• Click Add a gadget and select "HTML Java Script" Widget
• Copy and paste the below code in it

<style type="text/css" scoped>
ul.kangismet_recent{list-style:none;margin:0;padding:0;}
.kangismet_recent li{background:none !important;margin:0 0 6px !important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.kangismet_recent li:hover{border: 1px solid #ddd;}
.kangismet_recent a {text-decoration:none;}
.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;width:35px;height:35px}
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Numair';
//]]>
</script>
<script type="text/javascript" src="https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>

• Then click on the save button.

Recent Comment Widget customization With Avatar

To create a different look , please edit the CSS above,

numComments = 5 ( the number of comments displayed )
showAvatar = true ( false , if you want to hide avatars )
avatarSize = 35 ( the size of the avatar in pixels )
roundAvatar = true ( avatar round )
characters = 40 ( the number of characters the content of the comments )
defaultAvatar = " http://www.gravatar.com/avatar/?d=mm " ( default avatar )
adminBlog = ' Numair ' ( the name of the blog admin , shall be substituted )

 Hope you like it

Also See:
How To Change Blogger Comments Style