Show avatars on Blogger Comments

Blogger is now introducing features every day as part of its 10th birthday celebrations.Now it has formally announced the Blogger Comment avatars. To know what it means take a look at the comments here on this blog and you will see the profiles pictures of the commentators near to the comments.If you are using some default blogger template things would be much easy.Here is a little screenshot of the new feature.

Implementation of Comment Avatars

1.First of all Go to Blogger > Settings >Comments and enable “Show profile images on comment”

2.Now if you have a normal un customized template you will see the avatars on the comments on your blog.

3.If you have a customized template you will have to add some codes and play around with your template.For that first go to Blogger Layout >Edit HTML and backup your template.

4.Expand the widget templates and check if you can find this line there

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

If you can’t then that means we have something to do..

If you couldn’t find this,then do the following steps.

a)Find

<dl id='comments-block'>

and replace it with

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

b)Now Find all occurrences of

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

and 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'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

If you are using the author comment highlighting trick and if doesn’t work out with that trick,then leave a comment and i will try to help you out..

Further Styling.

If you want to add a default avatar for the ones with no profile pics,then place the CSS code just above

]]></b:skin>

CSS Code

.avatar-image-container {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEherQO_GtDS1bTeU1XNM5qaxTQsfELbw4IJwldSWJfVI08pDskwXPsf4dje2g9_1k3Q7L5CdE6g_CuM-28EadKuGXLIuvCdHuqLHYSTzNjPgkhHtIiWYHUB6AbbR9dy1SYJU8-AQTuUEw/s400/default.gif); width:35px;height:35px; }
.avatar-image-container  img { border:none;}

You can customize the CSS according to what you need.

If you need bigger avatars instead of smaller ones,then use the following CSS instead of the one above.

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6wAVNvvz4RXw6PUyXNzjDN9wg-u-O-achsTXfbu9-AwIVcuZrx8n2OdvUhnkdK5mTw_UmDZ5TwU9_JSEJf7Iuxc7gXSQKZQf_Lr45dtjHsh3QD7Ae5X4wDEfB9n-tnRzixfQBFXU3Hhg/s400/grav.png);width:50px;height:50px;}

This will give you a bigger avatar and also a default gravatar image but it has a little drawback.It will also resize the small blogger favicons to a big size.(blooger favicon is displayed when a blogger user doesn’t have a profile avatar.Similarly OpenId also has a similar small icon.. ).

BTW to set you avatar pic you can use two methods.You can choose the edit profile link on your blogger profile and upload an image there,The second method is to enter a blogger comment somewhere in any blogger comment form and then click the Preview button instead of the Post Comment button.Now you will see an option to upload your avatar.

In case anything bad happens restore the template backup.. and comment here..:)

Permalink: Show avatars on Blogger Comments

Comments

  1. Its a little bit to late for the blogger comment system ,, lol

    i use intense debatte ;)

    ReplyDelete
  2. @Christian Schnitt (Stulles Weblog) ,
    yea it was a little late.. but better late than never

    ReplyDelete
  3. Hi Anesh,

    I'm using mybloglog avatar in my blogger blog cz that is support custom URL, and not only blogger profile, anywy, Thanks for info about this update :D

    ReplyDelete
  4. Thanks, very useful. Appreciate the post for us with Customized templates.

    ReplyDelete
  5. But in this code, blog author's comment settings get disappeared.

    ReplyDelete
  6. Pretty darn cool! :-) Thanks! I love your tweaks!

    ReplyDelete
  7. very useful information, thank you

    ReplyDelete
  8. It is not working on my blog. Please help me.

    ReplyDelete
  9. @sajitha ,
    did you follow the steps in this post??
    and if that doesn't work try reverting widget templates to default(From Blogger Layout>Edit Html page)

    BTW you have a good blog but a bad design.. :)

    ReplyDelete
  10. @Ms Hetal Patil ,
    blog author's comment setting means?

    ReplyDelete
  11. Hi Aneesh

    I get this hack working Only by replacing <dl id='comments-block'> in Blogger Template code by :

    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
    <data:comment.authorAvatarImage/>
    </b:if>

    Juste try it, its working perfectly with my blog LeBlogger.com (French)

    Hope this could help.

    ReplyDelete
  12. @Soufiane LeBlogger ,
    the avatar image code should appear within the blogger comment b:loop.

    <dl id='comments-block'> lies outside the comment loop in normal blogger templates.So if you replace that with the modified avatar codes,then the avatar code would be outside the blogger comment loop..

    ReplyDelete
  13. Yes you're right, I was in a little hurry when i wrote my comment any way its working in my blog and your first code it wasn't working.

    Have you an idea of how we can choose an other Image for Anonymous comments ???

    ReplyDelete
  14. what about changing no-image blogger profiles icon size ???

    ReplyDelete
  15. For some templates, there's no a expr:name='data:comment.anchorName'/

    so the code must be added after the first <b:loop values='data:....>

    ?????

    ReplyDelete
  16. Sorry to confuse you, Aneesh. I mean that hack where blog author's comments are highlighted as compared to visitor's comments.

    ReplyDelete
  17. @Ms Hetal Patil ,
    give me the code used there and i can try to help you out..

    ReplyDelete
  18. @Ms Hetal Patil
    i rejected the previous comment because its not the code that i am talking of(and it was too big :P). You wont be able to paste template codes into this comment box. So i can help you if you mail me the template or post the same in the forums. Email aneesh[at]bloggerplugins.org..

    ReplyDelete
  19. Aneesh, please provide me your mail id i will mail you template.

    Many thanks to you

    ReplyDelete
  20. @Soufiane LeBlogger,
    yes place it within the loop,
    probably below the first dt tag in the b:loop
    i added some CSS to display a default no image(gravatar default image) and also resized theavatar a lil bit..

    ReplyDelete
  21. @Ms Hetal Patil i have already done that in my previous comment.

    ReplyDelete
  22. Nice!.........post with good info.,sure! i'll use it on my blog. Thanks !

    ReplyDelete
  23. Hi - I'm using the author comments hightlight hack, and sadly using these instructions didn't work. If you could help me figure out what I'm doing wrong it'd be very much appreciated!

    ReplyDelete
  24. @Nymeth ,
    can i have a look at your template.. you will get my email from the previous comments..

    ReplyDelete
  25. thanks for the help with this. I cant get it to work on mine, but i'll toy with it some more. great post.

    ReplyDelete
  26. @mackenzy ,
    in case you need some help,comment me here..

    ReplyDelete
  27. hi,
    where do i place the backlink code you provided?

    ReplyDelete
  28. I'm having trouble with this too. "anchorName" is nowhere in my template. Can I email my template to you for some assistance?

    ReplyDelete
  29. @SuziQoregon,
    hmmmm ok my email is there in some previous comment

    ReplyDelete
  30. Hi. I have tried this on my blog but it's not working. What could be wrong?

    ReplyDelete
  31. Really this is a nice feature of Blogger. I also told it in my blog.

    Thanks for sharing

    ReplyDelete
  32. Obrigada pelo tutorial, ficou ótimo! Estou repassando ele para os meus visitantes com os devidos créditos.

    ReplyDelete
  33. @Lecca,
    ok .. You are welcome .. continuem visitando ..
    i am not that bad at Portuguese :P

    @Terence Chan ,
    i missed you.. i haven't provided any backlink code..This one is the comment code..If you want me to help, show me your template code or explain what has gone wrong. :)

    ReplyDelete
  34. its working
    thank u for the great job
    kousik

    ReplyDelete
  35. Hi..anyone helpme..i found the step (a) code and replaced it,but im unable to find the step code(b)to replace..its not their in my template code..what to do?
    Help me
    ..My template is SCARLETT 4 column template..you download it from here and check the code..

    http://www.allblogtools.com/blogger-templates/4-columns/scarlett-4-columns/

    ReplyDelete
  36. @jumper,
    try placing the code mentioned in b) after the line
    <b:if cond='data:comment.isDeleted'>

    ReplyDelete
  37. I installed this but its not working in my blog. I am using the highlighting the author trick, I hope you can help me with this one. Thanks!

    ReplyDelete
  38. @Boffill ,
    i can't say without seeing the template as there are many implementations of the highlighting hack.

    ReplyDelete
  39. Thank you Aneesh. I try for this new feature to show avatar on blogger comment.
    http://bloggershoutbox.blogspot.com

    ReplyDelete
  40. Hi, friends !

    I have a blog about psychology (in polish, but I have Google Translator Widget).

    I can't find the line dl id='comments-block' so I don't know what should I do. Please help me !

    ReplyDelete
  41. @Integralny,
    try the second step only and let me know what happens.. :)

    ReplyDelete
  42. I can't find the second part with "anchor", too... :(

    ReplyDelete
  43. @Integralny ,
    try putting after <cite>
    If you cant find that one also,then contact me with your template.

    ReplyDelete
  44. I've found "cite". What should I put after it ?

    ReplyDelete
  45. @Integralny try putting the replacement code mentioned in b) after removing the line <a expr:name='data:comment.anchorName'/> from it

    ReplyDelete
  46. I've found cite but I haven't find any line of code with word "abchor". It doesn't exist.

    ReplyDelete
  47. @Integralny ,
    just put the big code snippet mentioned in step b) of this post after <cite>

    ReplyDelete
  48. @Integralny,
    hmm your template codes are lil different.. if you want to get it fixed.. Contact me with your template at the forums

    ReplyDelete
  49. First of all, thanks to this very useful post.

    I have a customized templet and reading your post I am trying to show profile images on comments.

    I have followed your steps and completed step (a), but now I am unable to find the code in step (b)in my templet. What I have to do now is the question?

    please instruct me for the same.
    Thanking you.

    ReplyDelete
  50. Hey there,
    thank you very much for this helpful post. I tried it on a testblog and it worked, although the avatar appears above the name and not right next to it.
    Do you have a idea how to fix that ? Thank you very much for your help
    :)

    ReplyDelete
  51. I´m a little confused. You say if I can´t find

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

    What if I can find it? It´s there, but I don´t know what to do now. Do I just continue to follow the other steps in your description?

    Thanks, Mike

    ReplyDelete
  52. @Mike,
    check if this code is present
    <data:comment.authorAvatarImage/>

    If that is not present,backup your template and continue the steps mentioned in the post..

    ReplyDelete
  53. Yes, that´s there too. My blog isn´t really that customized either. Nav bar is hidden and I´ve unhidden the page elements above posts and in the header, as well as hidden the header border. Also some really basic color modifications, but that´s it. But when I go to enable Post Pages, the drop-down button is greyed out and unaccessable.

    Another problem I have is not being able to back up my template. When I try I always get a message telling me it can´t be opened wherever I try to open/save it.

    Thanks again for any help,

    Mike

    ReplyDelete
  54. Hi Aneesh,

    I was trying to follow your instructions but I can't make it work. I'm not very technical person. Does it have something to do with the placement of code in step b?

    Here's what I did:

    a. Replaced dl class='comments-block' id='comments-block' with dl expr:class='data:post.avatarIndentClass' id='comments-block'.

    b. Added the following code after b:loop values='data:post.backlinks' var='backlink':

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

    Please tell what is wrong with what I'm doing. I just remove the open and close braces to get this comment through.

    Thanks in advance.

    ReplyDelete
  55. Hi, Aneesh, i tried to install it, i see some avatar, but not mine, it's the blogger logo actually. is there something wrong with it?
    i copied the code after b) at two places, the one you describe (nothing happened) and before this:

    [a expr:href='data:comment.authorUrl' rel='nofollow'
    data:comment.author]

    and then i had some pic appeared but not the avatar. Can you help me?
    I accepted the showing avatar in blogger option and all...
    thanx

    ReplyDelete
  56. @nicquee ,@Pabouch
    i am not able to figure it out.. I can fix it for you guys,if you mail me your template. My email is there in the previous comments..
    or you can use the contact form here..

    ReplyDelete
  57. Hi Aneesh,
    I want to follow your instructions, but I don't know where I heve to put that code because I couldn't find this code on my blog this code

    dl id='comments-block'
    and
    a expr:name='data:comment.anchorName'/

    where is it ? and so on.
    Please tell me how and where I have to put your code

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

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

    or this

    ]]>/b:skin
    and this
    .avatar-image-container {background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAAAAAAAAwA/xaGlRIqkHDw/s400/default.gif); width:35px;height:35px; }
    .avatar-image-container img { border:none;}

    or this

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

    on my blog html code.
    Please help me.

    Thank you.

    ReplyDelete
  58. Very good article and very useful. Thank you Aneesh

    ReplyDelete
  59. It doesn't work in my blog (http://lilleskvat.blogspot.com). I get the same small image in every comment, but it isn't the avatar :-(

    Please, help!

    ReplyDelete
  60. well done! Very useful.

    ReplyDelete
  61. I have install this on my blog, but I use Mybloglog Avatar. Thanks anyway for this tips

    ReplyDelete
  62. Thank you so much for the easy instructions!

    Everything worked great except that I noticed for my blog, I needed to do it like this:

    1. Implementation of Comment Avatars
    2. Save Template
    3. Further Styling

    I found that if I tried to do both steps at once then saved last nothing worked but this way worked perfect for me!

    Thank you, Thank you, Thank you!

    ReplyDelete
  63. Hi.
    I implemented all the code but it only displays my avatar whenever I leave NEW Comments on my blog. It still displays the old blogger icon next to all the previous comments I left on my blog. Is it supposed to work like this?

    Is it not supposed to automatically display my avatar on ALL the older comments I've already made on my blog too? Just asking. Or only for new comments from now on?
    Example of new comments after your code has been implemented:
    http://globetrottingonline.blogspot.com/2009/04/launchy-keystroke-launcher-for-windows.html
    Example of old comments after your code has been implemented:
    http://globetrottingonline.blogspot.com/2009/08/my-facebook-profile-gives-page-not.html
    (as you can see on the last URL my avatar still shows the old blogger icon, not the new avatar)


    Another thing I noticed is that every time I leave a comment now, it makes a new copy of the avatar image and stores it in my blogger album at Picasa. If I leave 3 comments on a post on my blog and you look at the Properties of my avatar images, the URLs are different. So if you had to leave 1000 comments over time on your own blog, you'll have 1000 copies of your avatar image in your blogger album! Surely it must reference only one image since I only have one avatar?

    ReplyDelete
  64. i try and it works.. so much thanks...

    ReplyDelete
  65. could not find the line

    b)Now Find all occurrences of
    4th one


    in my blog ksrtcblog.com

    ReplyDelete
  66. aww geez, Ive played around w/ my template so much , Ive changed the avatar images so many times, eliminated codes, added new ones - wheeew I cant even find the codes you have listed above anymore- I believe they all ran away to China ! they got tired of getting shifted around by me all the time :))
    I'm such a bad girl , I cant leave the codes alone :( poor codes ...

    ReplyDelete
  67. Uh oh... what happened? It all seemed to be working perfectly and then all of a sudden only the first five profile pics are showing up in the comments. I noticed that the same thing has happened here too! Any ideas?

    ReplyDelete
  68. @Yeah, I'm Still Here,
    yea this has happened to all blogs..i hope that the blogger team would soon fix it..

    ReplyDelete
  69. Excellent bro ... I finally got it working. Point b was missing for my template, I copied content before after " dd class='comment-body' " and it worked fine for me.

    http://sureshvaishya.blogspot.com

    ReplyDelete
  70. On each of your post there is the total number of comments displayed on the top. I tried finding that in your site and couldn't find how to do that. Please give directions

    ReplyDelete
  71. Look at comments on my site whats happening : (

    http://bloggerplugnplay.blogspot.com/2009/10/zoom-image-to-original-full-size-on.html

    ReplyDelete
  72. Help!!!
    I can't find my template this code a expr:name='data:comment.anchorName'/ help me???

    ReplyDelete
  73. very good, I finally found the answer. because I was looking for this tutorial to my blog .. thanks, nice post

    ReplyDelete
  74. it is not working on my blog. Please help me Aneesh!!! I sent you an email!

    ReplyDelete
  75. Hi Aneesh. The profile pic shows on my blog but not within the comment like here on your blog, despite following the steps of the hack.

    What do I do now?

    ReplyDelete
  76. kinda cool tutorial.... :D thx alot,.

    ReplyDelete
  77. thanks again, my simple blog becoming more & more sophisticated with your tweaks

    ReplyDelete
  78. Nice Tips, but how if any blogger using "template classic"? maybe you can help me.

    ReplyDelete
  79. only substitute avators show up when I use embedded comments. Real avatars show up when using pop-up comments. Help?

    ReplyDelete
  80. thanks for share, useful information...^_^

    ReplyDelete
  81. Thanks so much! I've BEEN trying to get this done. I love your site.

    ReplyDelete
  82. Thank you, it's so great. But I'd like to add some border to the avatars, where can I put that?

    ReplyDelete
  83. Hello, Aneesh, it's me again. Is there a way to change the default Blogger "B" favicon to another one of one's own choosing?

    ReplyDelete
  84. @Glenn - Refer http://www.bloggerplugins.org/2007/07/another-blogger-trick-change-favicon.html

    ReplyDelete
  85. @Aneesh - I'm sorry, Aneesh. I did not mean the favicon on the tab line, I meant the default "B" in 16px which shows up in the comments when the commenter has no favicon for him- or herself. Specifically, as it relates to this post. Thanks.

    ReplyDelete
  86. excellent and very informative.

    ReplyDelete
  87. Hi very useful information, thank you

    ReplyDelete
  88. Thank you very much.
    Your website has really helped me in gathering the information I needed.

    ReplyDelete
  89. Very useful posts... thanks! I have a question, though. Do you know how to make the comment avatars un-clickable, so they don't link back to a Blogger (or any other) profile?

    ReplyDelete
  90. Hello there...
    some how i am not able to find it for my site....
    i really dont know what to do... kindly help me.....

    My avatars are not being displayed...
    Please visit http://handpickednotes.blogspot.com and let me know... please!

    ReplyDelete
  91. hey there i did everything you told us to but its not working pls help me man

    ReplyDelete
  92. HI, I'm from Brazil, this tool is very good "Comment Avatars", I'll try to implement.
    Nice blog. congratulations!

    ReplyDelete
  93. i didn't find the two lines you mentioned, but i found:

    dl class='comments-block' id='comments-block'

    and

    a expr:href='data:blog.url + "#" + data:comment.anchorName' title='comment permalink'

    can i actually use the steps above with those lines?

    i've tried, but it doesn't work :(

    thanks for your attention :) nice blog!

    ReplyDelete
  94. it works very well on my blog, thanks

    ReplyDelete
  95. Works great - thanks!

    One question I have - I would like to stylize the comments even further. I'd like to put the avatar and the commenter's name in a separate box above their comment (maybe 2 separate colored boxes?). Do you know how I could do this?

    ReplyDelete
  96. I have added. It works.

    ReplyDelete
  97. Hi - I couldn't find an occurrence of

    In the custom blogger template I'm using. If you could help me out, it would be greatly appreciated. http://lisabrowndesign.blogspot.com/

    ReplyDelete
  98. Thank you. It works like a charm!

    ReplyDelete
  99. just checking my openid avatar is shown or not?

    ReplyDelete
  100. how to create register/sign in in my blog?
    why when we register to follow, we cant comment use this profile....

    ReplyDelete
  101. love it! it did work for me! thanks! bookmark this site already!

    ReplyDelete
  102. I've been using your code since you first put it up but suddenly it isn't working any more. I haven't changed my code or template. I can't see the avatars in FireFox or Chrome. I have a friend who uses your code and the avatars are still working for her. Any ideas?

    I love your code and have a link back to here in my blog's footer.

    ReplyDelete
  103. Thank you very much!!!! I have become crazy to sold this! And i couldn't solve the problem without you! Thank you very much=)

    ReplyDelete
  104. Great information resource! Thanks for sharing!

    ReplyDelete
  105. Thanks, it worked well... but I couldn't get to have the same border as I have around the blogger avatar (I have a thin border around them)

    I've tried border: 1px solid $(image.border.color); instead of {border:none;} but I couldn't get a border. Frustrating.

    ReplyDelete
  106. Thx a lot Aneesh. After several attemps, I finally made it to my blog. Thx and keep up your good works. Will visit again soon.

    ReplyDelete
  107. my avatar shows here but on my blog

    ReplyDelete
  108. Hi!

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

    ReplyDelete
  109. nice one i ll use his @ www.jasica.in

    ReplyDelete
  110. please help me add avatar to recent comments. mail to vietlao2003@gmail.com

    ReplyDelete
  111. yes..!!
    this great tutorial.
    BTW, how to generate favicon url blog to gravatar blogspot ?
    avatar comment from favicon url like this http://gravatar.com/favicon.ico

    any idea ?
    thank you.

    ReplyDelete
  112. Your blog is great , thx for the tips

    ReplyDelete
  113. honthakun pektra. thanks

    ReplyDelete
  114. Friend i need your help pls do at the earliest.

    The Comment Avatar Could not Set Center and need also remove the avatar Border.

    Thanking You

    ReplyDelete
  115. Hello dear, nice tutorial . I had tried to apply this one in my blog, but no effect happened. Could you find the problem for me?? oh ya this is my blog thanks before
    http://ypsrandy.blogspot.com/

    ReplyDelete
  116. I have a blogger account, and all my old comments (that used to display my profile pic) the picture is gone now. It is now just a circle with a line through it?
    Any idea how I can get my pic back on all the old comments? I did something, not sure what; but anyhow the profile is showing up on new comments I post, but not on the old comments.

    ReplyDelete
  117. My avatar seems to show up on others' blogs but not my own. Also, no one's photos show up with their comments on my blog.

    ReplyDelete

Post a Comment