Stylish Recent Comments Widget with Avatar (Thumbnails) for Blogger

Are you looking to add a recent comments widget to your blogger blog? Recently, one of our readers demands us to cover an article on adding beautiful recent comments widget for Blogspot blogs. That's why in this article I will show you how you can easily add an elegant looking recent comments widget which also shows gravatar thumbnail of the commentator. Isn't it cool? Yes! It is. So before adding this widget to your blog, let's check out its live preview below. Also, Check: Stylish Popular Posts Widget With Round Thumbnails for Blogger Live Demo Why Add Recent Comments Widget? There may be any particular reason why you want to add this widget to your blog but I have listed below major needs to add this classic widget. People use to add this widget mostly to bring more professional looks to their blog. Check out recent comments on their blogs and moderate them easily. How to Add Stylish Recent Comments Widget with Avatar on Blogspot Blog? Just follow the below simple steps to add beautiful recent comments widget to your blogger blog. Go to Blogger Dashboard > Layout. Click on Add a Gadget > HTML/JavaScript. Copy and Paste the below-given code into the content box. <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:blonotenoteck;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:80px;-moz-border-radius:80px;border-radius:80px;}    .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;line-height: 1.0;}.latest_recent_comments span{display:none;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 80,    showMorelink    = false,    moreLinktext    = "More &#65533;",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]></script><script src="http://yourjavascript.com/114177022121/bbeginner-recent-comments.js"></script><script src="http://url.blogspot.com/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script> Now change highlighted url.blogspot.com with your own blog URL. Further Customizations (Optional): To change the number of comments find this max-results=5 and change 5 to desired number. If you don't want to show avatar then find this code showAvatar = true and change true to false. To change avatar size find this code avatarSize = 60 and change as per your desired pixels. If you don't want to show rounded avatars then find this code roundAvatar = true and change true to false, it will show  To set the maximum number of characters find this code characters = 80 and change 80 to the number of characters you want to show. To show more link in comments, find showMorelink = false and replace false with true. It will show a read more link to that particular comment. If you enable show more link value then you can change the text which shows more link. Find this code moreLinktext = "More »" To change default avatar image find this code defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" otherwise leave as it is. Now save your widget and You're all done. Thanks for showing your love for BBeginner and keep supporting us more by following us on social media.  You Might Also Like: How to Unlock and Remove Locked Blogger Widgets? Let me know your views about this great widget in the comment section below. Also, if you face any difficulty drop down a comment and I will surely help you in the best possible way.

Tweet

1

Are you looking to add a recent comments widget to your blogger blog? Recently, one of our readers demands us to cover an article on adding beautiful recent comments widget for Blogspot blogs. That's why in this article I will show you how you can easily add an elegant looking recent comments widget which also shows gravatar thumbnail of the commentator. Isn't it cool? Yes! It is. So before adding this widget to your blog, let's check out its live preview below.

Also, Check: Stylish Popular Posts Widget With Round Thumbnails for Blogger

Live Demo

Why Add Recent Comments Widget?

There may be any particular reason why you want to add this widget to your blog but I have listed below major needs to add this classic widget.

1. People use to add this widget mostly to bring more professional looks to their blog.
2. Check out recent comments on their blogs and moderate them easily.

How to Add Stylish Recent Comments Widget with Avatar on Blogspot Blog?

Just follow the below simple steps to add beautiful recent comments widget to your blogger blog.

• Go to Blogger Dashboard > Layout.
  
• Click on Add a Gadget > HTML/JavaScript.
  
  
  
• Copy and Paste the below-given code into the content box.

<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:blonotenoteck;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:80px;-moz-border-radius:80px;border-radius:80px;}    .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;line-height: 1.0;}.latest_recent_comments span{display:none;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 80,    showMorelink    = false,    moreLinktext    = "More &#65533;",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]></script><script src="http://yourjavascript.com/114177022121/bbeginner-recent-comments.js"></script><script src="http://url.blogspot.com/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script>

• Now change highlighted url.blogspot.com with your own blog URL.

Further Customizations (Optional):

1. To change the number of comments find this max-results=5 and change 5 to desired number.
2. If you don't want to show avatar then find this code showAvatar = true and change true to false.
3. To change avatar size find this code avatarSize = 60 and change as per your desired pixels.
4. If you don't want to show rounded avatars then find this code roundAvatar = true and change true to false, it will show 
5. To set the maximum number of characters find this code characters = 80 and change 80 to the number of characters you want to show.
6. To show more link in comments, find showMorelink = false and replace false with true. It will show a read more link to that particular comment.
   If you enable show more link value then you can change the text which shows more link. Find this code moreLinktext = "More »"
7. To change default avatar image find this code defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" otherwise leave as it is.

• Now save your widget and You're all done.

Thanks for showing your love for BBeginner and keep supporting us more by following us on social media. 

You Might Also Like:

• How to Unlock and Remove Locked Blogger Widgets?

Let me know your views about this great widget in the comment section below. Also, if you face any difficulty drop down a comment and I will surely help you in the best possible way.