How Show Blogger Profile Images In Comments As Avatars

How To Show Blogger Profile Images In Blogger Comments.As many of us bloggers saying it as showing of avatars in blogger comments but they are not avatars, they are just your blogger profile images and many readers also get mistaken by it, But they are right to say them as avatars, as they are like avatars for our bloggers.As it has been near about an month blogger has released this feature and i have found most of the bloggers also using this in there blogs.But some still have problems and not have made the solution for blank spaces in comments for anonymous comments.So i would like to hold a complete detailed tutorial on it.The below picture show up how profile images show up in blog as i have taken this snapshot from my blog after implementing this hack.

Now How to enable the blogger profile images in blogger comments.

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

If you are using default blogger templates then they get enabled and profile images will start up to show in blogger comments.They can also start up to show up in some customized templates but it depends at to what extent there comment section been customized or not.

Some Of The Problems You Wouldn’t Like even after Enabling Profile Images In Default Template.

There will be two major problems in it.

1)The bloggers who don’t have uploaded there profile images to there profiles while comments will show up a blogger favicon of size 16×16 like below.It doesn’t look good from my point of view because the blogger profile images show up a picture of size 35×35.

2) The bloggers who do comments with there blog urls or anonymous comments will end up with a blank space in comments.That looks really awkward.It destroys the beauty of comment system as you can see from below image.

I have shown all the 2 problems in above picture as i hope it will be clear to you right now.Now we need to solve these problems.But first i would like to tell you about how to enable profile images in comments in blogs who are using customized templates, just what they they need is to edit small bit of codes in there blogger html.Now carry on with this tutorial.

How Enable Blogger Profile images In Customized Templates

First of all enable the feature of profile images in your blogger settings as i showed above.Now check your comments.If it shows up blogger profile images in comments,then its ok else follow next step.

First step Go to Blogger Layout >Edit HTML and backup your template.Now Expand the widget templates and check if you can find this line there

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

If you don’t find above line then find below line:-

<dl id=’comments-block’>

And replace it with the above line which you didn’t found in your codes.

And if you still not able to find the above line you may get this one:-

<div id=’comments-block’>

And replace it with the top most line which you didn’t found initially.

Now find this line in code:-

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

And replace it with below codes.

<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 then you can get this code <a expr:name=’data:comment.anchorName’/> once more in your template but not necessary.So replace it also with above codes.

Now Save your template and you will be now able to see blogger profile images in your comments as i showed above in picture but with the two problems of showing favicon of small size and blank space for anonymous and other url comments.

Solution For The Problem

What we need is now to resize the blogger favicon to the size of blogger profile images and we need one more image for showing up for anonymous and url comments.As Soufiane from LeBlogger was the first to come out with the solution and helping us.

Now Just Go to blogger edit/Html and find for ]]></b:skin> tag and place the below css codes before it.

/* Avatar */
.avatar-image-container img {
background:url(http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=35);
width:35px;
height:35px;
}

You can just edit the image link, height and width in above css codes as you like.

Save it, You’re done.

Now The the above image will be shown up for anonymous and url comments and favicon will be resized to width and height of size as you set as above in css codes.Now check how the better comments look as compared to above i shown.

I am sure now you will have no problems in implementing this in your blogs.If still you have some problems leave your comments i will try to solve them.Best Of Luck !

As i have been seeing that some of the bloggers are not getting this line <a expr:name=’data:comment.anchorName’/> in there codes.So i wanna tell you one thing i.e the complete codes which enable profile images to be placed in the blogger.Just you have to place these codes in blogger, i think they might also can help you.

<dl expr:class=’data:post.avatarIndentClass’ id=’comment’>
<dt expr:class=’&quot;comment-author &quot; + data:comment.authorClass’ expr:id=’data:comment.anchorName’>
<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>
</dt>
</dl>

If you will put this codes in place of the code i told you find in beggining of tutorial that is the comment-block one the hack will also work, just you have to adjust the closing of div tags or dl or dt tags depends what have been defined in your template codes.

And if still you not able to do it and want to enable it,just invite me to your blog at my id anshulaffprg[at]gmail.com and i will do it in 5 minutes for you as i get admin to it.

71 Comments

  1. Shaamil October 26, 2009
  2. BrahmaKumar Vaskar October 26, 2009
  3. Anshul October 26, 2009
  4. angelshair October 27, 2009
  5. Mr G.A.G. October 27, 2009
  6. Lonely.Boy October 27, 2009
  7. wandering soul October 27, 2009
  8. Anshul October 27, 2009
  9. Prabhat's Books and Comics October 28, 2009
  10. Lonely.Boy October 28, 2009
  11. Anshul October 28, 2009
  12. Anonymous October 29, 2009
  13. cool October 29, 2009
  14. Anshul October 29, 2009
  15. Lonely.Boy October 29, 2009
  16. Soufiane LeBlogger October 29, 2009
  17. Soufiane LeBlogger October 30, 2009
  18. Anup November 1, 2009
  19. Anshul November 2, 2009
  20. Soufiane LeBlogger November 4, 2009
  21. Anshul November 8, 2009
  22. Sultan Mehmood November 10, 2009
  23. Soufiane LeBlogger November 10, 2009
  24. Rajesh Kanuri November 19, 2009
  25. Anshul November 20, 2009
  26. Sedran November 21, 2009
  27. ClearlyEnlight, December 6, 2009
  28. Anshul December 6, 2009
  29. Ariadna December 6, 2009
  30. QwertyWEB December 7, 2009
  31. Anshul December 8, 2009
  32. QwertyWEB December 8, 2009
  33. Anshul December 8, 2009
  34. qwertyweb December 8, 2009
  35. ADMIN 4ALL December 9, 2009
  36. Anshul December 9, 2009
  37. ADMIN 4ALL December 9, 2009
  38. ADMIN 4ALL December 9, 2009
  39. Anshul December 9, 2009
  40. ADMIN 4ALL December 9, 2009
  41. Anshul December 10, 2009
  42. Anshul December 27, 2009
  43. Anshul December 27, 2009
  44. Soufiane LeBlogger December 31, 2009
  45. Anshul December 31, 2009
  46. tiz me January 9, 2010
  47. Vito Winarianto February 23, 2010
  48. Anshul February 24, 2010
  49. post2.soo March 7, 2010
  50. Adrian March 16, 2010
  51. Clara Lascale March 20, 2010
  52. Anshul March 20, 2010
  53. Clara Lascale March 20, 2010
  54. Clara Lascale March 20, 2010
  55. Anshul March 20, 2010
  56. Isnan Nugrah Lastiko May 7, 2010
  57. Eric T. Lurick May 8, 2010
  58. Anshul May 8, 2010
  59. Zero Music May 26, 2010
  60. Anshul May 26, 2010
  61. Zero Music May 27, 2010
  62. Anshul May 27, 2010
  63. RP4 July 9, 2010
  64. Anshul July 9, 2010
  65. RP4 July 9, 2010
  66. Svetlana July 13, 2010
  67. Anshul July 13, 2010
  68. BINH NGUYEN May 23, 2011

Leave a Reply