08 February 2013
Recent Comments Widget with Round Avatars for Blogger
I am 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 to WordPress 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="itsimtiazfor.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=6"></script>
Note:-
- Change numComments = 5 to your desired number.
- Replace itsimtiazforum.blogspot.com with your blog Url.
3. Save the gadget and then Save the Layout.
0 comments:
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
Regards,
Imtiaz Ahmed