Leatest Tricks: Azora Multipurpose WooCommerce Theme   NewsTube Blogger Template   Fabulicious Blogger Template   Ivero Blogger Template   How to create rollover image effect   HeradinoMag Blogger Template   ColorMag – Free WordPress Magazine Theme    100+ Smooth & Smart "Scroll To Top" Button Codes    How To Easily Download From Indishare    Download Button with two arrow   Blogger Recent Comments Widget with Circle Avatar    Latest version Facebook comment box for Blogger (v2.3)    Animated Social Share Button For Blogger with CSS   Weather Widget For Blogger. Free weather widget for website.    How To Add Time Ago Format In Blogger Post Date   How To Remove Showing Post With Label In Blogger   Top Commentators Widget With Avatar For Blogger   Changing "Post a Comment" With Image and Text   Add Demo and Download button in Blogger    Blogger Most Commented Widget with Awesome Look    Blogger Tips and TricksLatest Tips And TricksBlogger Tricks

Blogger Recent Comments Widget with Circle Avatar

Sourav 8/14/2015
Blogger Recent Comments Widget with Cirle Thumbnails

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>


Done !

Related Article

adss