Blogger Tips
In one of the previous tutorials, we saw a simple Recent Comments widget that displays the latest comments published on the blog posts but the main disadvantage was that the widget didn't have the option to show the users avatars. So, for those who'd like to see something more, here's a stylish Recent comments widget with round avatars and comment excerpts. Besides providing the option of displaying the commenters avatars, we'll be able to change the default image for the anonymous avatar, as well.
Isn't that cool? Let's begin adding it!
Step 2. When the pop-up window appears, scroll down and choose the 'HTML/JavaScript' gadget:
Step 3. Copy and paste the code for the recent comments widget inside the empty box:
- if you want square avatars instead of round, remove the line in red;
- by default, the recent comments widget with avatars will display 5 comments. If you need to show more, replace the "5" value in red;
- to change the avatar for anonymous users, replace the following address with the URL of your picture:
Step 4. After changing these settings, click the 'Save' button and we're done!
From now on, when a reader sees the recent comments widget with avatars for Blogger in the sidebar, he comes to know that your blog is pretty active and that encourages him to post comments on your blog. This way, you can gather some active user base to comment on your blog posts.
- Add A Cool Style To Blogger Threaded/nested Comments
If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually...
- Top Commentators Widget With Avatars For Blogger
The commentators are a fundamental part of any blog, since they are the ones that give life to the blog, opening and replying to discussions which leads to more activity in the posts. It is therefore very important to know which are the most active users...
- Expandable Recent Comments Widget For Blogger/blogspot
The Expandable Recent Comments widget for Blogger is a very accessible widget that can be collapsed or expanded through user interaction, so we don't have to click the author's name or post title link in order to read the content of a comment....
- How To Change Avatar Size In Blogger Comments
This simple trick will help you modify the avatars size in Blogger comments whose default size is of 36px... pretty small considering that a lot of sites these days are using much larger avatars. To change the style and size of avatars is very easy -...
- Recent Comments Widget For Blogger
This Recent Comments Widget for Blogger will display the most recent comments on your blog's sidebar, showing a snippet of the last comments along with the title of the post where the comment was made. The comments will be gathered in descending order...
Blogger Tips
Add Recent Comments Widget with Avatars To Blogger
In one of the previous tutorials, we saw a simple Recent Comments widget that displays the latest comments published on the blog posts but the main disadvantage was that the widget didn't have the option to show the users avatars. So, for those who'd like to see something more, here's a stylish Recent comments widget with round avatars and comment excerpts. Besides providing the option of displaying the commenters avatars, we'll be able to change the default image for the anonymous avatar, as well.
Isn't that cool? Let's begin adding it!
How to add recent comments widget with avatars
Step 1. Go to Blogger Dashboard and select your blog > go to 'Layout' and click the 'Add a Gadget' link:Step 2. When the pop-up window appears, scroll down and choose the 'HTML/JavaScript' gadget:
Step 3. Copy and paste the code for the recent comments widget inside the empty box:
<style type="text/css">Note:
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 >Get this <a href="http://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html">Recent Comments Widget</a></div>
- if you want square avatars instead of round, remove the line in red;
- by default, the recent comments widget with avatars will display 5 comments. If you need to show more, replace the "5" value in red;
- to change the avatar for anonymous users, replace the following address with the URL of your picture:
http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg- to change the size of the avatar, replace 60 value in green
Step 4. After changing these settings, click the 'Save' button and we're done!
From now on, when a reader sees the recent comments widget with avatars for Blogger in the sidebar, he comes to know that your blog is pretty active and that encourages him to post comments on your blog. This way, you can gather some active user base to comment on your blog posts.
- Add A Cool Style To Blogger Threaded/nested Comments
If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually...
- Top Commentators Widget With Avatars For Blogger
The commentators are a fundamental part of any blog, since they are the ones that give life to the blog, opening and replying to discussions which leads to more activity in the posts. It is therefore very important to know which are the most active users...
- Expandable Recent Comments Widget For Blogger/blogspot
The Expandable Recent Comments widget for Blogger is a very accessible widget that can be collapsed or expanded through user interaction, so we don't have to click the author's name or post title link in order to read the content of a comment....
- How To Change Avatar Size In Blogger Comments
This simple trick will help you modify the avatars size in Blogger comments whose default size is of 36px... pretty small considering that a lot of sites these days are using much larger avatars. To change the style and size of avatars is very easy -...
- Recent Comments Widget For Blogger
This Recent Comments Widget for Blogger will display the most recent comments on your blog's sidebar, showing a snippet of the last comments along with the title of the post where the comment was made. The comments will be gathered in descending order...