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.detutor.com/2015/02/recent-comments-widget-for-blogger.html" rel="dofollow" >Recent Comments Widgeta>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 == 'Show all') { unfold_all(this); this.value='Hide all'; } else { fold_all(this); this.value='Show all'; }" 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

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.detutor.com/2015/02/recent-comments-widget-for-blogger.html" rel="dofollow" >Recent Comments Widgeta>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

<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 == 'Show all') { unfold_all(this); this.value='Hide all'; } else { fold_all(this); this.value='Show all'; }" 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

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags: Без рубрики