Recent Comments Widget with Rounded Images for Blogger

Share

Iam trying to complete the blogger comment series from many days but the time won't allowing me to do it. Now a days i am spending maximum hours for blogging and i am trying to launch my second blog too which is related toWordPress plugins and even optimizing few low quality blog posts of this blog. In single word, I am totally messed up with all these together, but I am still trying to serve my best. I really apologize for taking lot of time to complete this post and i can understand that many of my blog readers like you is eagerly waiting for regular posts as i used to do regular posting from the beginning of this blog.

Regular posting have became quite difficult task now. But obviously lot of surprises on the way pals, kindly stay updated. OK lets move on with today's post.

Today I am going to give you perfect working recent comments widget for your blogger blog that could really help you in getting more number of comments. In fact, at the beginning of this blog, i didn't had any commentators here, now the time have rolled out and you can notice lot of new commentators involving here everyday and I am even trying to help them at my level best. This recent comments widget really became an advantage for me to notify my blog visitors about the conversations going on every blog posts. OK enough talks now, the live demo of this widget with rounded official looking author images can be easily noticed on my blog's sidebar and hope you know its advantage. Let us move on with the tutorial now.

1. Go to blogger dashboard --> Layout --> Add a Gadget [ Html / JavaScript ].

2. Copy the peace of code given below.

Recent Comments Widget code

<style type="text/css">
/*recent comments widget by bloggertricks.biz*/
ul.latest_recent_comments{
list-style:none;
margin:0;
padding:0;
}
.latest_recent_comments li{
background:none !important;
margin:0 0 6px !important;
padding:0 0 6px 0 !important;
display:block;
clear:both;
overflow:hidden;
list-style:none;
}
.latest_recent_comments li .avatarImage{
padding:3px;
background:#fefefe;
-webkit-box-shadow:0 1px 1px #ccc;
-moz-box-shadow:0 1px 1px #ccc;
box-shadow:0 1px 1px #ccc;
float:left;margin:0 6px 0 0;
position:relative;
overflow:hidden;
}
.avatarRound{
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}
.latest_recent_comments li img{
padding:0px;
position:relative;
overflow:hidden;
display:block;
}
.latest_recent_comments li span{
margin-top:4px;color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
.latest_recent_comments span{
display:none;
}
</style>
<script type="text/javascript">
//<![CDATA[    // Recent Comments Settings    var numComments  = 5, showAvatar  = true, avatarSize  = 60, roundAvatar = true, characters  = 30, showMorelink = true, moreLinktext = "More �", defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true;//]]></script>
<script type="text/javascript" src="https://bloggertricksdotbiz.googlecode.com/svn/js/recent%20comments.js"></script>
<script type="text/javascript" src="http://www.bloggertricks.biz//feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=6"></script>

Note:-

• Change numComments = 5 to your desired number.
• Replace bloggertricks.biz with your blog Url.

3. Save the gadget and then Save the Layout.

That's It pals..... Now go to your blog and view the official recent comments widget showing recent comments with commentators image rounded. Hope you like this one. . :) Kindly leave your feedback and opinion about this. Take care...