Adding Expandable Recent Comments Widget In Blogger

It's been a couple of days when  I was out in my blogging career and now I'm back with my computer's table to make another great post. Today, I will share to you a trick on how to make your recent comments more attractive and professional in its looks. I would say that the code that I am going to share with you is credited to helplogger and I made some sort of innovations in order to present it in a more unique 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.

How To Add 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://bloggingtipsandtrix.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://bloggingtipsandtrix.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>
</div>

Customizations:

• Replace http://bloggingtipsandtrix.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 you're done!
Happy Blogging Buddies!!!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook