Thursday, 14 December 2017

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.

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     = "",    hideCredits    = true;//]]></script><script src=""></script><script src=";callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script>

  • Now change highlighted 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 = "" 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. 
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.


Unknown on 30 December, 2017 said...

Wow, great post.

Patricia Grasher on 21 June, 2018 said...

I love your comments box here. Would you consider making a tutorial for this?

Confused? Feel free to ask!

We love comments! We appreciate your queries but to protect from being spammed, all comments will be moderated by our human moderators. Read our full comment policy here.
Let's enjoy a happy and meaningful conversation ahead!



Recent Comments

Copyright © 2017-18 All Rights Reserved by BBeginner.Com ׀ Designed by Protection Status