Recent Comments With Circle Avatar Widget In Blogger

Blogger Recent Comments Widget With Thumbnails 

This is a widget that can show recent comments with circle avatars. Recent Comments with circle Avatars widget is a cool widget for Blogger. By this widget you can display a number of comments.

This widget is made with CSS and Javascript. By using this widget you can also change the comment of Avatar size. This recent comment widget is fully different with other widget. This CSS look is awesome. 

Steps to add this widget in Blogger

1. Go to Blogger Dashboard.
2. Then Layout.
3. Now, Add a gadget ( HTML Javascript ) and paste the below code and save it.

<style type="text/css" scoped> 
ul.ms_recent{list-style:none;margin:0;padding:0;} 
.ms_recent li{background:transparent;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;} 
.ms_recent li:hover{background:#fff;border: 1px solid #e9e9e9;}
.ms_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} 
.avatarRound{border-radius:100px;width:35px;height:35px} 
.ms_recent li span{margin-top:4px;color: #444;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 = False;
 maxfeeds=50,
 adminBlog='MS';
//]]>
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/msdesign92/ms-design/master/recent2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=ms_recent&amp;&amp;max-results=50">
</script>

Done, that's it. This is how you can add recent comments with with circle avatar Widget in Blogger.