Add Recent Comments Widget With Circle Avatar In Blogger

 

Add Recent Comments Widget With Circle Avatar In Blogger

Recent Comments Widget

recent posts widget,comments,recent comments widget,widgets,add recent comments widget,recent comment widget,how to add recent comments widget,how to use recent comments widget,add recent comments widget in blogger,recent comment widget for blogger,recent comment widget to your blog,how to add recent comments widget in blogger,widget,comments widget,recent comments,mh recent comments,recent comment,comments widget in elementor pro

Add Recent Comments Widget With Circle Avatar In Blogger

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. 

How to add 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>