How to Add Expandable Recent Comments Widget In Blogger

Building blocks frame your house, while finishing makes it more appealing. Today, I will share to you another trick on how to make your recent comments more attractive and professional look. I would say that the code that I am going to share with you is abstracted from helplogger and I made some changes in order to present it in a more fascinating manner. This Expandable Recent Comments widget is a very accessible for it can be collapsed or expanded through your user's 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. The expanding content of the comment can be shown or hidden by clicking on the plus/minus icon or by hitting the "Show all" or "Hide all" button at run time.

Adding The Expandable Recent Comments Widget to Blogger

Step 1. Log in to your Blogger dashboard
Step 2. Hit the Layout button
Step 3. Click on "Add a Gadget" link
Step 4. In the pop-up window, scroll down and click on the HTML/JavaScript widget
Step 5. Copy and paste the code below and paste it 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://mybloggersnipers.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://mybloggersnipers.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>
</div>

Do few changes:

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

Replace 1px (font size) with your own desired font size, bigger number means bigger size of the font

Replace dashed with your desired border styles, click link to see different border styles.

Replace #A6A6A6 with another hexadecimal color that would most fit your blog's theme.

And lastly, change the phrase Hide all and Show all with another synonyms related to that phrase.

Step 6. Save your widget and tha's it!

Good Day Friends !