 |
How to Add Recent Comments Widget For Blogger? |
Have you seen blogs with recent comments gadget / widget which show the most recent comments of their blog at one place? We have a tutorial on adding a recent comments widget for blogger which you can use to add recent comments widget on your blog.
The widget is coded in Javascript and with a little css so it can fit with your template color scheme.
You can also customize the widget according to your needs.
What you can Customize in Recent Comments Widget?
- Total number of comments to display/
- Date of comment published. You can either display it or hide it.
- Posts on which a comment has been made. You can either display post titles or hide post titles.
- Number of words per comment.The first "n'' words of the comment will be listed. Here "n" is the number which you will decide to enter while adding the widget.
How to Add Recent Comments Widget For Blogger?
- Login Blogger Account.
- Go to "Layout " and Click on "Add a Gadget".
- Add HTML/Javascript Gadget.
- Paste the following code in HTML/Javascript Gadget.
<script type="text/javascript">
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;
function showrecentcomments(e){for(var r=0;r<a_rc;r++){var t,n=e.feed.entry[r];if(r==e.feed.entry.length)break;for(var i=0;i<n.link.length;i++)if("alternate"==n.link[i].rel){t=n.link[i].href;break}t=t.replace("#","#");var a=t.split("#");a=a[0];var c=a.split("/");c=c[5],c=c.split(".html"),c=c[0];var s=c.replace(/-/g," ");s=s.link(a);var o=n.published.$t,l=(o.substring(0,4),o.substring(5,7)),u=o.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in n)var d=n.content.$t;else if("summary"in n)var d=n.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<div class="rcw-comments">'),1==m_rc&&document.write("On "+m[parseInt(l,10)]+" "+u+" "),document.write('<span class="author-rc"><a href="'+t+'">'+n.author[0].name.$t+"</a></span> commented"),1==n_rc&&document.write(" on "+s),0==o_rc)document.write("</div>");else if(document.write(": "),d.length<o_rc)document.write("<i>“"),document.write(d),document.write("”</i></div>");else{document.write("<i>“"),d=d.substring(0,o_rc);var w=d.lastIndexOf(" ");d=d.substring(0,w),document.write(d+"…”</i></div>"),document.write("")}}}
</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script><div style="font-size: 10px; float: right;">Get this <a href="https://techztutorials.blogspot.com/2017/07/how-to-add-recent-comments-widget-for.html">Recent Comments Widget</a></div>
<style type="text/css">
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px dotted;padding: 7px 0;}
</style>
- Change http://your-blog-name.blogspot.com with your blog link.
Customization:
- To change the displayed number of comments, replace the "5" value from a_rc=5;
- To add the comment published date, change the "false" text from m_rc=false to "true"
- To hide post titles, change the "true" text from n_rc=true to "false"
- To show more or less comment characters, change the "100" value from o_rc=100
- Save Template.
- Done!