Add Recent Comments Widget in Blogger with Avatar

Spread the love

In previous post you have seen How to Add Recent Comment Widget in Blogger.  But that widget doesn’t display the avatar of commentator.  If you want to add avatar of commentator in recent comment widget than, you should follow this post. In this post you will learn how to add recent widget with avatar in your Blog/BlogSpot. Recent comment widget is a very useful way to show your comment traffic in your blog. It will create a good impression to your blog visitors. You can also set the avatar for blogger user who don’t have profile picture and for anonymous users. It will help you to customize the widget according to your blog style.

You can see the demo blog for example:

[wpsm_button color=”green” size=”big” link=”http://demoblog-165.blogspot.com/” icon=”none” class=”” target=”_blank” rel=”nofollow”]Demo Blog[/wpsm_button]
Add Recent Comments Widget in Blogger

In Blogger there isn’t any option to add recent comment widget in blog, So, you have to add it manually. So, if you want to add this cool widget in your blog than you have to follow some steps to add this on your blog. Just follow those steps:

Add Recent Comments Widget in Blogger with Avatar

Step 1. First of all, you have to go at Blogger Dashboard and then go to Layout >> Add a Gadget.

Note: We recommend you to add this gadget under slidebar-right-1 section.

Add Recent Comments Widget in Blogger

Step 2. After clicking “Add a Gadget” you will get a pop-up window. From that pop-up window select HTML/JavaScript.

Add Recent Comments Widget in Blogger

Step 3. Than you will get 2 empty box. One for Title and another for Content(code). Copy and paste this code in Content box.  You shouldn’t give any title to this widget.

Add Recent Comments Widget in Blogger

The code has given here:

[wpsm_codebox style=”1″] <style type=”text/css”>
ul.helploggercomments{list-style: none;margin: 0;padding: 0;}
.helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;}
.helploggercomments li .avatarImage {padding: 3px;
background: #fefefe;-webkit-box-shadow: 0 1px 1px #ccc;-moz-box-shadow: 0 1px 1px #ccc;box-shadow: 0 1px 1px #ccc;float: left;margin: 0 6px 0 0;position: relative;overflow: hidden;}
.avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.helploggercomments li span {margin-top: 4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type=”text/javascript”>
//<![CDATA[
// Recent Comments Settings
var numComments  = 5,
showAvatar  = true,
avatarSize  = 60,
roundAvatar = true,
characters  = 40,
showMorelink = false,
moreLinktext = “More »”,
defaultAvatar  = “http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg“,
hideCredits = true;
//]]>
</script>
<script type=”text/javascript”>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?”:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return’\\w+’};c=1};while(c–)if(k[c])p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,’g’),k[c]);return p}(‘7 E=E||5,8=8||12,o=o||13,k=k||”h://4.F.p.f/-14/15/16/17/G/18-19.1a”,H=H||” 1b &1c;”,q=(r q===\’u\’)?j:q,v=(r v===\’u\’)?Q:v,m=(r m===\’u\’)?j:m,I=(r I===\’u\’)?Q:m;1d R(w){7 9;9=\'<S J=”R”>\’;K(7 i=0;i<E;i++){7 x,y,3,n;6(i==w.T.b.z)1e;9+=”<U>”;7 b=w.T.b[i];K(7 l=0;l<b.L.z;l++){6(b.L[l].1f==\’1g\’){x=b.L[l].A}}K(7 a=0;a<b.M.z;a++){y=b.M[a].1h.$t;3=b.M[a].1i$1j.V}6(3.g(“/G/”)!=-1){3=3.B(“/G/”,”/s”+8+”-c/”)}e 6(3.g(“/W/”)!=-1){3=3.B(“/W/”,”/s”+8+”-c/”)}e 6(3.g(“/X-c/”)!=-1&&3.g(“h:”)!=0){3=”h:”+3.B(“/X-c/”,”/s”+8+”-c/”)}e 6(3.g(“N.f/C/1k-Y.O”)!=-1){3=”h://1.F.p.f/-1l/1m/1n/1o/s”+8+”/1p.Z”}e 6(3.g(“N.f/C/1q-Y.O”)!=-1){3=”h://2.F.p.f/-1r/1s/1t/1u/s”+8+”/1v.Z”}e 6(3.g(“N.f/C/1w.O”)!=-1){6(k.g(“1x.f”)!=-1){3=k+”&s=”+8}e{3=k}}e{3=3}6(q==j){6(m==j){n=”1y”}e{n=””}9+=”<10 J=\\”1z “+n+”\\”><C J=\\””+n+”\\” V=\\””+3+”\\” 1A=\\””+y+”\\” 1B=\\””+8+”\\” 1C=\\””+8+”\\”/></10>”}9+=”<a A=\\””+x+”\\”>”+y+”</a>”;7 11=b.1D.$t;7 d=11.B(/(<([^>]+)>)/1E,””);6(d!=””&&d.z>o){d=d.1F(0,o);d+=”&1G;”;6(v==j){d+=”<a A=\\””+x+”\\”>”+H+”</a>”}}e{d=d}9+=”<D>”+d+”</D>”;9+=”</U>”}9+=\'</S>\’;7 P=””;6(I==j){P=”1H:1I;”}9+=”<D 1J=\\”1K-1L:1M;1N:1O;1P-1Q:1R;”+P+”\\”>1S 1T<a A=\\”h://w.p.f/\\”> 1U</a></D>”;1V.1W(9)}’,62,121,’|||authorAvatar|||if|var|avatarSize|commentsHtml||entry||commBody|else|com|indexOf|http||true|defaultAvatar||roundAvatar|avatarClass|characters|blogspot|showAvatar|typeof|||undefined|showMorelink|helplogger|commentlink|authorName|length|href|replace|img|span|numComments|bp|s1600|moreLinktext|hideCredits|class|for|link|author|blogblog|gif|hideCSS|false|helploggercomments|ul|feed|li|src|s220|s512|rounded|png|div|commHTML|60|40|SRSVCXNxbAc|UrbxxXd06YI|AAAAAAAAFl4|332qncR9pD4|default|avatar|jpg|More|raquo|function|break|rel|alternate|name|gd|image|b16|7bkcAKdpGXI|UrbyQRqvSKI|AAAAAAAAFmI|oBv_yMeYnMQ|blogger|openid16|VgnInuIUKBU|UrbzyXTYWRI|AAAAAAAAFmU|3f_Vfj3TI6A|openid|blank|gravatar|avatarRound|avatarImage|alt|width|height|content|ig|substring|hellip|visibility|hidden|style|font|size|10px|display|block|text|align|right|Widget|by|Helplogger|document|write’.split(‘|’),0,{}))
</script>
<script type=”text/javascript” src=”/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5″></script><div style=”font-size: 10px; float: right; margin-top: -15px”>Get this <a href=”http://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html”>Recent Comments Widget</a></div> [/wpsm_codebox]

Note: If you don’t want round avatar in recent comment widget than simply remove the green line from the code. You can also customize those things:

  • If you want to change the number of comments that will show in the recent comment widget, then increase or decrease the value “5” with red color in the code.
  • To change the default avatar for anonymous, replace the blue URL with your image URL.( If you want to get URL of your image than read this post:Upload Image and Get the Image URL)
  • To change the size of avatar in recent comment widget, you have to change the value of “60” in green color.
  • If you want to change the number of character that will be displayed in every comment than just change the value “40” in orange.

Step 4. Now click on “Save” to save this widget.

Add Recent Comments Widget in Blogger

Your work has done! Now your blog visitor will see recent comment of your all blog posts. It will help you’re to show popularity. And it will help you to create a good reputation towards new blog visitors.  If you want a recent comments  Widget with no avatar then, you can try this Recent Comment Widget for Blogger .

If you need any help please comment here or contact us and send your questions and problems.

bnewtech Editorial Staff

Editorial Staff at Bnewtech is a team of reviews and tutorial writing experts led by BTS. Page maintained by BTS.


Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.