Recent Comments Widget with Rounded Images for Blogger

Recent comments widget for blogger blog could really help you in getting an extra number of comments from your readers. In fact, at the opening of this blog, I didn’t have any commentators here, now the time has rolled out and you can notice a lot of new commentators involved here every day and I am even trying to support them at my level best. This recent comments widget actually became an improvement for me to inform my blog visitors about the conversations going on every blog post.

How to add Recent Comments Widget to your Blogger blog?

Follow the very simple steps to add the “Recent Comments Widget with Rounded Images” to your BlogSpot blog.

  • Go To Blogger > Design > Page Elements
  • Click on the “Add a Gadget” link
  • From the pop-up window, choose the “HTML/JavaScript” widget
  • Copy and paste the following code below
/** Recent Comments Widget code */
<style type=”text/css”>
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=”http://yourjavascript.com/58121378161/www.mybloggertopic.blogspot.com.js”></script>
<script type=”text/javascript” src=”https://www.mybloggerblog.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=6″></script>
Settings:
  • Change numComments = 5 to your desired number.
  • Replace the red highlighted link https://www.mybloggerblog.blogspot.com/ with your Blog Url.
  • Click ‘Save’ the gadget and then ‘Save’ the Layout.

That’s It…..Now go to your blog and view the official recent comments widget showing recent comments with commentators' images rounded.

Similar Posts:

Previous Article
Recent Posts Widget with Thumbnails for Blogger
Next Article
How to Display Related Posts in Genesis without Plugin

Thanks for choosing to comment on this article. A name and email address are required to post a comment. The email address is not publicly visible or shared. Please keep in mind that comments are moderated according to our comment policy.

Leave a Comment