Expandable Recent Comments Widget for Blogger/Blogspot

This Expandable Recent Comments is a very accessible widget that can be collapsed or expanded through user interaction, so that now, we don't have to click on the commenter or post title link in order to see the content of a comment.
recent comments widget, blogger gadgets, blogspot tricks

The expanding content can be shown or hidden by clicking on the plus/minus icon or by pressing the "Show all" or "Hide all" button at run time.
How To Add The Expandable Recent Comments Widget to Blogger

Step 1. Log in to your Blogger dashboard and go to Layout > Click on "Add a Gadget" link


Step 2. From the pop-up window, scroll down and click on the HTML/JavaScript widget


Step 3. Copy and paste this code inside the empty box:
<style type="text/css" media="screen">
.row-aa {        background: #f2f2f3; }
.row-bb {        background: #F8F5F1; }
.row-div { 
  margin:0px;
  padding:5px;
}
.comment-header {
  font-size:0.9em;
//  border:1px solid #E0E0E0;
//  background-color:#F3F3F3;
  padding:4px;
  margin-top:10px;
  margin-bottom:5px;
}
.comment-box {
  margin:0px;
  padding:0px;
  font-size:0.9em;
  height:500px;
  overflow:auto;
}
.comments1  { 
//  background: #F3F3F3;
  padding:3px;
  border-left:1px dashed #A6A6A6;
  color: #888888;
  font-style: italic;
  padding-top:4px;
  margin-bottom:5px;
}
.comment-footer {
  text-align:center;
  font-size:0.9em;
  padding:4px;
  margin-top:5px; 
}
</style>

<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript"  src="http://bloggerchive.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://bloggerchive.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>

</div>

Note: Replace http://bloggerchive.blogspot.com with your blog/site address.

Step 4. Save your widget and you're done!

Enjoy :)

Comments/disqusion
8 comments

  1. says:

    Really nice. love it. but can be more colourful

  2. says:

    Good..!!! Will Use this.

    Have a look at my blog
    http://unlimitedsoftz.blogspot.in

  3. says:

    not working today...yesterday was working? i didin't change anything...please help

  4. says:

    wow..thats great

  5. says:

    Thanks you. It very helpful for me

  6. says:

    Thank you very much. I have modified it a bit and it's working fine.
    If you want the modified code, do let me know :)

  7. says:

    its not working ,,,its coming hat your blog is in other place,,place it back and reload

  8. says:

    what ?