In one of my recent posts on this blog, I shared how Top Commentator Widget with Avatar can be added to blogger blogs.
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 ==========>
You may like:
- 10 Awesome Cursors for Bloggers
- Add Facebook Comment Box to Blogger
- 17 Awesome jQuery Scroll to The Top Button for Blogger
- Free Animinated Flash Clocks for Blogs and Websites
- Perfect Share Box With Subscription Form for Blogger
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,
showMorelink = false, moreLinktext = "More »", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = false; //]]> </script> <script type="text/javascript" src="https://justnaira.github.io/blogger-tricks/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.
thank you,
how to hide own comment?
I can’t copy the code, some elements are missing at my end here. Could be my browser anyway. I’ll be glad if you can send it directly to my email address Abdulmalikamodu@gmail.com
hello. how r u? i am from bangladesh, nd i am follow ur instruction to add dis into my blog. but i cant done dis. plz say something about dat.
@Mohsin, it’s not difficult to implement. Just make sure you follow the steps correctly.
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
@alexander, sorry for that, you can now copy the codes.
pls do i copy all? I dnt understand bro,am kinda a newbie
Follow the tutorial. Copy all the code into an HTML/JavaScript widget.
No one can copy the code if you disabled right-clicking, selecting and/or copying in the first place. So please explain.
@Anonymous, you can now copy the code now.
Thanks for sharing it here bro, I will check it out and try it on my blog too.
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
thank you for share