Professional Magazine Blogger Templates Read More ×

Thursday, April 30, 2015

Blogger Recent Comments Widget with Circle Avatar

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!
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> 


Results:






SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

4 comments:

  1. Thanks for your code,now my blog is more interactive and beautiful. Thanks you so much and keep the good work in helping newcomers in blogging world.

    ReplyDelete
    Replies
    1. Thanks bro for your support

      Delete
    2. I think its my moral duty,and its my pleasure.Thanks Bro #HappyBlogging.

      Delete