Pages

Wednesday, November 11, 2015

Recent Comments Widget For Blogger

Including a recent comments widget for blogger in your blog encourages readers to drop comments which increases the engagement on your blog. This blogger widget shows the most recent comments by your readers and the particular post which the comments were made. You can add it either in your  blog's sidebar, or footer. This recent comments widget displays without the commentator's avatar. If you'll rather add a different one that displays the comments with the avatars, check out the recent comments widget for blogger with avatar.

 Also Read:  Auto Scrolling Recent Post Widget For Blogger
                     All In One SEO Pack Plugin 2015 For Blogger
                     Most Commented Posts Widget For Blogger With Thumbnails



How to Add Recent Comments Widget to Blogger

  • From your blogger dashboard,
  • Goto your blog's Layout.
  • Click on 'add a gadget'.
  • From the pop up options, select 'HTML/Javascript'.
  • Copy the code below and paste in the text field.
Style 1

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.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://YOURURL/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script><div style="font-size: 10px; float: right;">Get this <a href="http://www.informationtutorial15.blogspot.com/2015/11/recent-comments-widget-for-blogger.html" rel="dofollow" >Recent Comments Widget</a></div>
<style type="text/css">
.rcw-comments a {
    text-transform: capitalize;
}

.rcw-comments {
    border-bottom: 1px dotted;
    padding-top: 7px!important;
    padding-bottom: 7px!important;
}
</style>


  • In the code above, peplace YOUR-URL with your blog's URL
Also Read: Recommended Post Slide Out Widget With Share Buttons
                   Numbered Page Navigation Widget For Blogger Blogs

To customize the recent comments widget, replace the following fields in the code.

var a_rc = 5;  (Change the highlighted value "5" to the number of posts to be displayed).
    var m_rc = false; (change the highlighted text to true, to show the date the comment was made).
    var n_rc = true;  (change the highlighted text to false, to hide the post title).
    var o_rc = 100;  (change the value "100", to increase or reduce the number of characters shown for each comment).

Style 2

 


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

</div>


  • Replace BLOG-NAME with your blog's URL.
  • Save the gadget

Posted by at
Labels: , ,