Blogger Recent Comments Widget with Circle Avatar

 

Blogger Recent Comments Widget with Cirle Thumbnails - is a widget that can show recent comments. We add many widget for make our blog beautiful. All of them Recent Comments Widget is one. By this widget you can display a number of comment(s).

In this time i share this widget. This widget is made with CSS and Javascript. By using this widget you also change the comment avatar size (Default size is 45px). This recent comment widget is fully different with other widget. This CSS look is awesome. Now let's start.

Go to Blogger Dashboard > Layout > Add a gadget > HTML/Javascript and copy past 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>

Results: