Add Recent Comments Widget with Rounded Images Blogger

Comments of community like friends and colleagues are very important on every post in a blogger. I am telling you the way how to add recent comments widget with round images int blogger blogspot. Previously there are many blogger specialists guide the users to add recent comments widget into blogger without images. Now adding images with recent comments is more attractive and looking beautiful. Recent comments widget displays comments with user images that looking stylish on the blogger page.
Previously i post an article on how to add popular posts widget with thumbnails and images on blogger blogspot. Now i will guide you today that how to add recent comments on blogger blogspot with rounded thumbs / images.

This widget shows blogger thumb on those users comments that have not add any profile or avatar pic on their profiles. So this will added automatically and shows blogger thumb on avatar image. The users that added their profile pic or avatar shows automatically with comments. User can customize comments length, image size, number of comments and more for this widget.

How To Add Recent Comments Widget with Rounded Images Blogger?

• Sign in to Blogger.com
• Goto Layout
• Choose Add a Gadget (At Sidebar or below Blog Post)
• Choose HTML/JavaScript
• Write any word in Title of this widget (Recommended: Recent Comments)
• Paste the following code in it,

<!-- Recent Comments Widget Start by StarsBlogging.blogspot.com -->
<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>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments = 8,
showAvatar = true,
avatarSize = 25,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More &#187;",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/starsblogging/w2b-recent-comments-gravatar.js?attredirects=0&d=1"></script>
<script type="text/javascript" src="http://starsblogging.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=8"></script>
<!-- Recent Comments Widget End by StarsBlogging.blogspot.com -->

Now Make These Changes on Your Choice

• numComments=8 is showing the 8 recent comments with thumbs on your blog. You can change number of comments on your choice.
• avatarSize=25 can change the height and width of avatar thumb of users.
• characters=40, will change the length of comments below the user profile name.
• Replace with your own blog URL with the above red bold URL http://starsblogging.blogspot.com/
• Change the max-results=8 with your own number. This will change the number of comments to display on blog.

Save the widget and also save blogger settings. After adding move the recent comments widget anywhere in the blogger layout. It may be on sidebar or lowerbar wrapper on your own choice.

Enjoy!, Keep comments...

Posted in: Blogger-Widgets, Blogging-Tips, SEO