Expandable Recent Comments Widget For Blogger

Today, I'm here with a new widget which is Expandable Recent Comments Widget. This widget can be collapsed/expanded through your visitor interaction. By using this widget, you don't have to click on the commenter or post link in order to see the comment content. The comments content can be shown by just clicking on plus/minus button. So, if you want to add this widget to your blog? Then follow the steps below : 

Add Expandable Recent Comments Widget To Your Blog

Step 1. Go to Blogger Dashboard >> Layout >> Add a Gadget

Step 2. Select HTML/JavaScript Gadget from the list of Gadgets

Step 3. Copy and Paste the following HTML code in the  HTML/JavaScript Gadget 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://yourjavascript.com/631025111207/blogolect.js"></script>
<script type="text/javascript"  src="http://blogolect.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://blogolect.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>

</div>

Step 4. Replace blogolect.blogspot.com with your Blog address
Step 4. Click on Save Button and You're Done :) Enjoy !!!

Share This:

Tags:

Widgets

• Prevoius
• Next