Recent Comments Widget for Blogger

Updated on July 10, 2016 - Post a Comment
Recent Comments Widget for Blogger is a simple blogspot Gadget which helps to show most recent comments on sidebar of your blog. It shows snippet of last comments with the post title name where your reader has made a comment. In ancient time blogspot was used a basic commenting system but with the passage of time it basic conversation system has been changed in Threaded Commenting System, its mean now other peoples also reply to one person. Now all bloggers are using this system on their websites as it is the best than basic version.
As you know Comments are the most precious job to inspire your site’s readers and visitors, so today I have brought beautiful gadget for you which is coded and covering in JavaScript with proper and limited CSS styling, that will surely suits to your blogspot template. But before adding see its useful features:
Features included in this pack
  • See number of comments to display according to your wish
  • Date displayed on the comment has been included, you can also hide it
  • Show post title on every comment as you want
  • Show number of characters below every comment according to your desire

How to Add Blogger Recent Comments Widget to Blogspot

1. Login with your Gmail Account to Blogger Dashboard >> Layout  and click on “Add a Gadget” link
add a gadget from blogger layout
2. Now a pop-up window box will appear, here kindly scroll down and select “HTML/JavaScript” option
html javascript blogger gadgets widgets
3. Copy the below set of code and paste it into HTML/JavaScript box
Style 1 (source: kslzone)
<style type=text/css>ul.nxmoi {padding: 0;list-style: none;}ul.nxmoi li {margin-bottom: 10px;border-bottom: 1px dashed #d2d2d2;padding-bottom: 10px;}</style><script>//<![CDATA[var sl_nhanxet = 7,    kt_nhanxet = 100;
// Recent Commentfunction nhanxetmoi(json) {    var entry, commurl, commsum;    document.write('<ul class="nxmoi">');    for (var i = 0; i < sl_nhanxet; i++) {        entry = json.feed.entry[i];        if (i == json.feed.entry.length) break;        for (var k = 0; k < entry.link.length; k++) {            if (entry.link[k].rel == 'alternate') {                commurl = entry.link[k].href;                break;            }        }        commsum = ("content" in entry) ? entry.content.$t : ("summary" in entry) ? entry.summary.$t : "";        commsum = commsum.replace(/<.*?>/g, "");        if (commsum.length > kt_nhanxet) commsum = commsum.substring(0, kt_nhanxet) + "...";        document.write('<li><strong><a rel="nofollow" href="' + commurl + '">' + entry.author[0].name.$t + ':</a></strong> <span>' + commsum + '</span></li>');    }    document.write('</ul>');}//]]></script>
 <script src='http://your-website-name.blogspot.com/feeds/comments/summary?alt=json-in-script&amp;callback=nhanxetmoi'></script>
</style>
Note:
  •  First replace http://your-website-name.blogspot.com with you website url address
  • Just replcae “7” with you value from “sl_nhanxet = 7” If you want to change number of comments which are being dislayed in the Gadget. 
  • Replace”100” from “ kt_nhanxet = 100;” with any value to show more or less characters as your wish
Style 2
<script type="text/javascript"> //<![CDATA[ function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content"in b_rc){var l_rc=b_rc.content.$t;}else if("summary"in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");document.write('<div class="rcw-comments">');if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<span class="author-rc"><a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a></span> ');if(n_rc==true)document.write(' on '+f_rc);if(o_rc==0){document.write('</div>');} else{document.write(': ');if(l_rc.length<o_rc){document.write(l_rc);document.write('</div>');}else{l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;</div>');document.write('');}}}} //]]> </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://your-website-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>
<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>
How to do Proper Settings in Recent Comments Widget for Blogger

  • First replace http://your-website-name.blogspot.com with you website url address
  • Just replcae “5” with you value from “a_rc=5;” If you want to change number of comments which are being dislayed in the Gadget. For example if you want increase then simply change bigger value with 5
  • Change “false” with “true” from m_rc=false, if you want to add the date on every comment
  • Replace “true” with “false” from n_rc=true, if you want to hide post titles
  • Replace”100” from “o_rc=100” with any value to show more or less characters as your wish
  • After making proper settings, finally click on “Save” button.
Share this: pinterest