Recent Comments Widget with Avatar for Blogger


In one of my recent posts on this blog, I shared how Top Commentator Widget with Avatar can be added to blogger blogs.

Recent-Comments-Widget-For-Blogger-Blogspot

But today, I want to share another tutorial on how to add the Recent Comments Widget with Avatar to Blogger/Blogspot Blogs. This widget will show a snippet of the recent comments posted on your blog alongside with the title of the post. It is also a good widget that encourages readers to drop comments on your blog. Before installing this widget on your blog, you can easily customize how you want it to appear on your blog such as the numbers of comments you want to display, size of the comment, whether or not to display the post name and the comment-date.

A demo of this widget is on the right side of this blog ==========>

Recent-Comments-Widget

You may like:

How to Install Recent Comments Widget on Your Blogger Blog

  • Go to your Blog Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript.
  • Copy and paste the code below into the HTML/JavaScript box.
<style type="text/css">
    ul.justnaira_recent_comments{list-style:none;margin:0;padding:0;}
    .justnaira_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;}
    .justnaira_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;}
    .justnaira_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .justnaira_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     = 5,
    showAvatar     = true,
    avatarSize     = 60,
    roundAvatar    = true,
    characters     = 40,

    showMorelink    = false,
    moreLinktext    = “More »”,
    defaultAvatar     = “http://www.gravatar.com/avatar/?d=mm”,
    hideCredits    = false;
//]]>
</script>
<script type=”text/javascript” src=”http://justnaira-css-js.googlecode.com/svn/justnaira-recent-comments-gravatar.js”></script>
<script type=”text/javascript” src=”http://www.justnaira.com/feeds/comments/default?alt=json&callback=justnaira_recent_comments&max-results=5“></script>

Customization of Recent Comments Widget

1. numComments= 5, and max-results=5 ==> Change the 5 to the number of recent comments you want to show on your blog
2. characters = 40, ==> Change the 40 to the number of comment excerpt characters you want to show.
3. You must change the www.justnaira.com in the code to your blog address.

For questions and queries, use the comment box below.


I love sharing my knowledge with others. Feel free to contact me with any questions you may have. Please subscribe to the newsfeed and get updates through email, share this article with friends, or leave a comment below. New users can read about me HERE

Share this on:Share on Facebook4Tweet about this on Twitter3Share on Google+1Pin on Pinterest0Share on StumbleUpon1Digg this

Comments

  1. you are a tech blogger and u disable copy and paste on ur site??….how do i now copy the html code…disable copy and paste is made for entetainment blogs and not tech bloggers….pls have a rethinl

  2. pls do i copy all? I dnt understand bro,am kinda a newbie

  3. Thanks for sharing it here bro, I will check it out and try it on my blog too.

  4. Rohan Mod says:

    comments widget should be awesome like yours because it helps in building relationship with readers and engaging conversation ,many of the top bloggers like you have written about it and also give importance to it.thanks for sharing.comments widget for blogger

  5. thank you for share

Tell us what you're thinking...

All comments are moderated.

* Denotes required field.

*