Recent Comments Widget for Blogger

Posted by Sujitha Reddy

Recent Comments Widget

Recent Comments widget is used to display the latest comments of a post in a blog. Comments are actually the best communication way to make contacts with the blog visitors and followers. This recent comments widget will inspire your visitors on your blog and makes them feel to comment also. This widget displays the name of the person who commented on which post and the content of comment. After each comment it will show some space or a line for differentiating comments.
how-to-display-recent-comments-in-blogger

Must See: Add Comment Count to Post Header Title
In this you can change the way the code displays and also the number of widgets or posts can be changed. Even you can display the picture of those who commented. By using this code we will get the images of those who commented on circles. So check the guide for free widget of recent comments for blogger. This can also be used for the wordpress.

See more: Search boxes widget for blogger and Head Banner Image Changing/Scrolling
                                

How to Add Recent Comments Widget

Follow the step by step procedure to get the recent comments widget.
----->First Sign in to Blogger Dashboard.
----->Go to Layout and select Add a Gadget.

recent-comments-widget-for-blogger

----->Click on HTML/Java script from the list. You can check the below image.
add-recent-comments-widget-with-avatar

----->Now give the title as Recent Comments and copy and paste the below code there.

 <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:0px;color: #000;display: block;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 50,
 roundAvatar = true,
 characters  = 30,
 showMorelink = false,
 moreLinktext = "More &#187;",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>

<script type="text/javascript" src="http://your-blog-address.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=5"></script><div><a style=" font-size:9px; color:#3B78CD; text-decoration:none;href="http://goo.gl/y2Ruo"> Get This</a>
</div>

----->Now replace it with your blog name. Click on save.
Thats it now you will get the recent comments widget on your blog with different design styles of images. This article is meant for the new bloggers to add top random widgets. If you have any queries regarding this post feel free to comment.

0 comments:

Post a Comment