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 16x16 like below.It doesn't look good from my point of view because the blogger profile images show up a picture of size 35x35.


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 will get this code <a expr:name='data:comment.anchorName'/> once more in your template.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.

Anshul