Latest News
Home » All Blogger Tips » Recent Comments Widget for blogger with avatar
web development, SEO services, Web designing

Recent Comments Widget for blogger with avatar

Recent Comments Widget for blogger
The recent comment widget for a blogger is useful for showing the recent comments on any post of your blog. This widget will provide you with the name of commentator, with the name of post on which he/she has commented and few lines of the comment and the main thing you will be able to see avatar of the person who comments. Isn’t it fantastic.

This is a stylish and attractive Recent Comments Widget for blogger. To add this widget to your blog just follow the following easy steps:

Steps to add Widget to your website: Recent Comments Widget for blogger

  • Go to your blogger dashboard
  • Click on layout option
  • Click on add widget option
  • Add HTML/Java script widget.
  • Add the below given code to this HTML widget.

<style type=”text/css”>
ul.w2b_recent_comments {
list-style: none;
margin: 0;
padding: 0;
}

.w2b_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;
}

.w2b_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;
}

.w2b_recent_comments li img {
padding: 0px;
position: relative;
overflow: hidden;
display: block;
}

.w2b_recent_comments li span {
margin-top: 4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>

//CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = “More »”,
defaultAvatar = “http://www.gravatar.com/avatar/?d=mm“,
hideCredits = true;
//]]>
</script>

your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5″></script>

 

  • Replace the name of your blog.
  • You can also change the anonymous gr-avatar .
  • You can change number of comments that are shown.
  • You can also change avatar size.
  • At last click save and you are done.
Reference: The credit goes to  way2blogging.org and http://helplogger.blogspot.in for providing this wonderful code.

Originally posted 2013-05-11 13:22:00.

About Vishal Sharma

Hi`i' m +Vishal, a Search Engine optimizer, internet marketer, web designer, affiliate marketer & founder of this blog. I love to learn and share new things. For any query or help you can contact me at any time.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.