Gadgets, Tech tips, WordPress and Blogger Tutorials

Recent Comments Widget For Blogger (blogspot)

Candy Monster

Here’s how you can add a recent comments widget (gadget) to your Blogger blog. (You may also want to add a Recent Posts with Thumbnails widget to your blog.)

Steps:

1. Go to your Blogger Dashboard > Layout > Page Element > Add a Gadget > HTML/JavaScript

2. Copy and paste the code below:

CODE
<script style=text/javascript src=https://sites.google.com/site/projectdigitaltomato/blogger/js/rc1blogger.js ></script>
<script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script>
<script src=http://YourOwnB1og.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href=http://www.madtomatoe.com/recent-comments-widget-for-blogger/>Recent Comments</a> <a href=http://www.madtomatoe.com/ target=_blank title=blogger widgets>Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>  
.rcw-comments a {text-transform: capitalize;} 
.rcw-comments {border-bottom: 1px #cccccc dotted; padding-top: 7px!important; padding-bottom: 7px!important;}
#rcdr {background: url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rcdr, #rcdr a {color:#808080;} 
</style>

3. In the code, look for this line:

…src=”http://YourOwnB1og.blogspot.com/feeds/comments/default…

…and replace the blog address (indicated in color blue) with your own blog address.

For blogs using custom domain…

…src=”http://www.YourOwnB1og.com/feeds/comments/default…

4. Add a title. Save.

That’s it!

Optional settings

How to change the number of comments

This widget is set to display 5 recent comments. If you want to change that number, just look for the number 5 in the code and replace it with the number of comments you want to be displayed. I recommend setting it to 5 to 8 comments.

… a_rc=5;var m_rc=false;var n_rc=true;var…

How to change the number of characters / hide excerpts

This widget is set to display a maximum of 100 characters of comment excerpt for each comment. If you want to change that number, just look for the number 100 in the code and replace it with the number of characters you want to be displayed. *

…n_rc=true;var o_rc=100;

*Recommended setting: 50 to 100.

If you want to hide the comment excerpts, just enter 0 (zero). Ex. …var o_rc=0

How to display the date of comments

If you want to show the dates of comments, look for this line:

… a_rc=5;var m_rc=false;var n_rc=true;var…

and replace the false with true.

Display only the comment author and the comment

Use this code if just want to show only the commenters’ names and their comments. The title of the post will be hidden.

CODE
<script style=text/javascript src=https://sites.google.com/site/projectdigitaltomato/blogger/js/rc1blogger-cut.js >
</script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script>
<script src=http://YourOwnB1og.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href=http://www.madtomatoe.com/recent-comments-widget-for-blogger/>Recent Comments</a> <a href=http://www.madtomatoe.com/ target=_blank title=blogger widgets>Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>  
.rcw-comments a {text-transform: capitalize;} 
.rcw-comments {border-bottom: 1px #cccccc dotted; padding-top: 7px!important; padding-bottom: 7px!important;}
#rcdr {background: url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rcdr, #rcdr a {color:#808080;} 
</style>

If you liked this widget, you may also like to add a Recent Posts with Thumbnails widget to your blog.

PHOTO: doug88888/flickr

Get updates delivered straight to your inbox!

Enter your email address:

389 comments

  1. Amandeep Singh /

    Hi,

    We’re interested in advertising on your blog / website. Let me know if you’re interested in discussing further about it.

    Thanks

    Amandeep singh

  2. Steave /

    good stuff

  3. yschan57 /

    请问一下,您女儿的笔记还留着么?能不能和我分享?

  4. Ana Cristina Crespo /

    Adriana, adorei a sua resenha, fiquei com vontade de ler o livro, ainda mais que sou fã de histórico

  5. Thank you! I appreciate you posting this widget code that I needed for my blog. You have a new follower. Great info you have here.

    Thanks again!

Leave a Reply