Recent Comments Widget For Blogger

Stylish recent comments widget for blogger and how to add comment box in 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

<link href='http://codepen.io/thebloggerguide/pen/XpdRBM.css' rel='stylesheet'/>
 <script type="text/javascript">
 //<![CDATA[
 var
 numComments = 5,
 showAvatar = true,
 avatarSize = 35,
 roundAvatar = true,
 characters = 40,
 defaultAvatar = "https://3.bp.blogspot.com/-sL6xl7eh7Mo/VueQmyj4WZI/AAAAAAAABmw/Cvr9T-GqDygLc_Hxt04_1L-MzNObOh6_Q/s1600/none.png",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='your name';
 //]]>
 </script>
 <script type="text/javascript" src="http://codepen.io/thebloggerguide/pen/XpdRBM.js"></script>
 <script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
 </script>


  • In the code above, peplace your name with your the blog's Author name

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

     numComments = 5;  (Change the highlighted value "5" to the number of posts to be displayed).
    defaultAvatar  = https://3.bp.blogspot.com/-sL6xl7eh7Mo/VueQmyj4WZI/AAAAAAAABmw/Cvr9T-GqDygLc_Hxt04_1L-MzNObOh6_Q/s1600/none.png (change the url to that of the default you want to be displayed).
    roundAvatar = true;  (change the highlighted text to false, to display square avater).
    characters = 40;  (change the value "100", to increase or reduce the number of characters shown for each comment).


Also Read:  Recommended Post Slide Out Widget With Share Buttons
                  Numbered Page Navigation Widget For Blogger Blogs


Style 2


Step 1


  • Goto your blog's layout,
  • Click on 'Add a gadget'
  • Select 'HTML/Javascript'
  • Copy the code below into the text box, then save



<div id="mbtloading" ></div> 
<script type="text/javascript"> 
function mbtcmts(json) { 
document.write('<ul class="mbtcmts">'); 
for (var i = 0; i < ListCount; i++) 
{ 
//################### Variables Declared 
var listing= ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m =  "";
//################### URL 
for (var j = 0; j < json.feed.entry[i].link.length; j++) { 
      if (json.feed.entry[i].link[j].rel == 'alternate') { 
        break; 
      } 
    }
if(json.feed.entry[i].link[2] != null) 
{ 
ListUrl= "'" + json.feed.entry[i].link[j].href + "'"; 
} 
else 
{ListUrl = "'#'"}
//####################### Splitting URL into Title
if(json.feed.entry[i].link[2] != null) 
{ 
var mbt_slit = json.feed.entry[i].link[j].href; 
        var M_slit = mbt_slit.split("#"); 
        M_slit = M_slit [0]; 
        var K_slit = M_slit.split("?"); 
        K_slit = K_slit[0];     
        var B_slit = K_slit.split("/"); 
        B_slit = B_slit[5]; 
        B_slit = B_slit.split(".html"); 
        B_slit = B_slit [0]; 
        var T_slit= B_slit.replace(/-/g, " ").charAt(0).toUpperCase()+ B_slit.replace(/-/g, " ").slice(1).substring(0, 50); 
        var Link_slit= T_slit.link(K_slit); 
}
//################### Info 
TotalPosts = json.feed.openSearch$totalResults.$t; 
ListAuthor= json.feed.entry[i].author[0].name.$t; 
var ListAuth = ListAuthor.split(" "); 
var ListAuth = ListAuth.slice(0, 1).join(" ");
ListProfile= "'" + json.feed.entry[i].author[0].uri.$t + "'";
//################### Content Check
ListConten = json.feed.entry[i].content.$t; 
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0, 10);
                         Y = ListDate.substring(0, 4); 
                        m = ListDate.substring(5, 7); 
                         D = ListDate.substring(8, 10); 
                         M = ListMonth[parseInt(m - 1)];                        
//################### Thumbnail Check
if (json.feed.entry[i].author) 
{ 
thumbUrl = json.feed.entry[i].author[0].gd$image.src; 
sk= thumbUrl.replace("/s72-c/","/s60-c/"); 
ListImage= "'" + sk + "'"; 
}
else 
{ 
ListImage= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'"; 
} 
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href=" 
+ListProfile+ 
  "><img src=" 
+ListImage+ 
"/></a><a class='ititle tooltip' href=" 
+ListUrl + 
"target='_blank'><span><b></b>" 
+ListAuth+ 
" Commented on » " 
+ M + 
" " 
+ D + 
", " 
+ Y + 
"</span>" 
+ ListAuthor+ 
"</a> <i> posted in</i>  <span class='ipostTitle'><a class='tooltip'  href='" 
+K_slit+ 
"'><span><b></b>" 
+T_slit+ 
"</span></a></span><span class='icontent'>" + ListContent+" ...   <a href="+ListUrl+">  » </a></span><div></div></li>"; 
document.write(listing); 
} 
document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>delicious comments posted so far!</i></div></ul>'); 
} 
</script>
<script> 
var ListCount = 5; 
var ChrCount = 90; 
</script> 
<script src="http://www.techlass.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script> 
<script>document.getElementById("mbtloading").style.display = "none";</script> 

Replace www.techlass.com with your blog's url


Step 2


  • Goto your blogger template
  • Back it up first before you proceed
  • Click on 'Edit HTML'
  • Use ctrl + F keys to search for the tag </head>
  • Copy the code below and paste above </head>


<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>


Step 3

Also search for ]]></b:skin>
Copy this code and paste above ]]></b:skin>
Then save your template

/*############Recent Comments Widget##################*/
.mbtcmts{list-style-type:none; overflow:hidden; } 
.mbtcmts li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;padding:0px;} 
.mbtcmts i{color:#999; padding-right:4px;} 
.mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: left;padding:3px; margin:0 0 0px 40px} 
.mbtcmts .icontent{ display:block; font-family:Georgia; color:#999; font-style:italic; line-height:1.5em;} 
.mbtcmts .icontent a {color:#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;} 
.mbtcmts div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;} 
.mbtcmts span { margin:5px 0px 0px; padding-right:5px;} 
.mbtcmts img {border-radius:100%; float:left; margin:0px 20px 20px 0px; border:1px solid #eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; } 
.mbtcmts .icapital {text-transform:Capitalize; display:inline-block;} 
.mbtcmts .ititle {font-family:oswald; font-size:14px; color:orange; font-weight:normal; text-decoration:none;} 
.mbtcmts .ititle:hover {color:#666;}
.mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-right:5px;} 
.mbtcmts .idate:before {content:'\f017'; color:#999} 
.mbtcmts .ipostTitle a {text-decoration:none; color:#999} 
.mbtcmts .ipostTitle a:before {content:'\f07c'; }
#mbtloading{ 
  margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;}
/*------ CSS3 Tooltip Shortcode -------------*/ 
.tooltip{outline:none;text-decoration:none!important;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{text-transform:capitalize;width:150px; padding:5px 5px;opacity:0;top:120%;left:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-50px}.tooltip span b{width:15px;height:15px;left:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:orange;border:1px solid #ffffff}.tooltip span b{background:orange;border-top:1px solid #ffffff;border-right:1px solid #ffffff}.mbtcmts .itotal {color:#333; padding:3px 3px 3px 10px; border:1px solid #eee; font-family:arial; font-size:12px;} 
.mbtcmts .itotal i {font-style:normal;} 
.mbtcmts .itotal span{font-family:oswald;  font-weight:normal; color:#333; text-decoration:none} 
.mbtcmts .itotal span:before {font-family:FontAwesome; position:relative; content:'\f075'; }

Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments