25 September 2009

How to show avatar's on blogger comments?


Now you can also add avtars to user comments as you have seen in various social networking sites. Avtars are small pictures of users.

Visit here for full demo of this widget.

To add avtar follow these simple steps-

1. Go to Blogger > Settings >Comments and enable “Show profile images on comment”. If you are using third party template then you have to add some html codes.

2. Go to Blogger Layout >Edit HTML and backup your template. Expand the widget templates and look for following code present or not


If it is not present then look for

<dl id='comments-block'>

And replace above code with following one

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

3. Now look for

<a expr:name='data:comment.anchorName'/>

It may present more than 1/2 times. So replace each of it with

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>

4. For Anonymous users with no profile pictures you can set a picture. Look for code


And add following code just ABOVE of the above code.

.avatar-image-container img {background:url(http://4.bp.blogspot.com/_tbHfaj1A058/SrzTu7NmpGI/AAAAAAAAHhQ/iw9fuRMO_aU/s1600/anon.png);width:50px;height:50px;}


Or you can use different code for following picture


.avatar-image-container img {background:url(http://3.bp.blogspot.com/_u4gySN2ZgqE/SrSUS1YpxwI/AAAAAAAAAv4/DihiWlWRxQs/s400/grav.png);width:50px;height:50px;}

If you want bigger avtar pictures then add following code instead of above

.avatar-image-container img {background:url(http://4.bp.blogspot.com/_tbHfaj1A058/SrzTu7NmpGI/AAAAAAAAHhQ/iw9fuRMO_aU/s1600-h/anon.png);width:50px;height:50px;}

Here you can also set height and width of avatar.

Happy Blogging.

Related Posts


October 9, 2009 at 5:34 PM

wow thanks. works for me ^_^

November 12, 2009 at 8:36 AM

Gr8 Work ....Thanks

November 20, 2009 at 8:56 PM

well...it's only worked on my own avatar but the other dun hv any image display...=.=
wat's the problem???

November 21, 2009 at 12:16 AM

Comments by Anonymous users do not show pictures. To make them visible follow step 4.

November 24, 2009 at 3:07 AM

i've tried it before. the icon doesn't show!! =.=

November 24, 2009 at 11:19 AM

thx for visiting. as you can c. it's jz show our avatar. but the anonymous doesn't hv.

November 24, 2009 at 10:38 PM

can you find following url in your template


November 25, 2009 at 1:31 AM

i can't found it. is it any problem with that?

November 25, 2009 at 11:23 PM

yes. It is the image location that displayed for anonymous comments in your blog. Try expand widget template and find if it is there?

November 26, 2009 at 12:32 AM

I expanded the widget still can't find it. then,how to fix it?

November 26, 2009 at 1:03 AM

upload your template to rapidshare or other site then give link here. I will try it.

November 26, 2009 at 3:08 AM

Here's my template link:

Thanks for helping me!

November 26, 2009 at 6:33 AM

I modified code for anno comments and also added new code for it. try them one by one.

November 27, 2009 at 2:07 AM

can u send me the template that u hv mod?

November 27, 2009 at 6:23 AM

i tried with your template but it not worked. I need original template. Can you tell me from where you downloaded it?

November 27, 2009 at 8:32 AM

here is the original template link.
http://www.mediafire.com/file/5otzycjdfl5/Zixpk Blue Template.rar

November 28, 2009 at 12:34 AM

you template is customized one and this feature only works with standard templates.

November 28, 2009 at 2:41 AM

any better solution if i wan to put the avatar?

November 28, 2009 at 11:14 PM

Currently only one - try a different template. First test it for this feature and then you can use it for your blog.

November 29, 2009 at 12:30 AM

nvm. i will try it. anyway thanks for your help. :)

June 4, 2010 at 12:31 AM

let me see. If it works I'll continue it.
Thank you.

August 10, 2010 at 3:37 AM

Thanks admin. I am using your tips. Its very nice tutorial. Could u tell me how to add custom domain?


August 11, 2010 at 2:04 AM

Hi Saimoom


1. At last added a Custom Domain from GoDaddy.com to Blogger!!!

2. http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=55373

March 14, 2011 at 11:01 AM


My blog is http://yoyepunto.blogspot.com and I can't find any ANCHOR in my template. What can I do? Thanks in advance!

March 14, 2011 at 11:54 PM

@ Nacho
Did you followed all the steps and clicked on Expand the widget templates

March 19, 2011 at 8:29 PM

hallo, my avatar, (author avatar) not showed . . please help me. . . :(

March 20, 2011 at 12:56 AM

# puluth®

Please follow the all steps and the codes carefully.

October 3, 2011 at 11:25 PM

hello .. please am using mobipress theme ... i tried every thing and get nothing .... plz if you can download the theme and reply me how to add it .... i will be very thankful for you


October 6, 2011 at 12:16 AM

Download Mobipress template from here:


Post a Comment


Twitter Delicious Facebook Digg Stumbleupon Favorites More