Avatar Image Blogger | Your Face In Comment Blogger

Right at birthday bloggers launched a new feature that bloggers like avatar image below :

We've also made it much easier to upload a profile photo when you leave a comment on a Blogger blog. From the comment preview, click "Add photo" to upload a photo to your Blogger profile. The next time you comment on a Blogger blog, your profile photo will be displayed next to your comment.

For those of you using a standard Blogger template, you should easily be able to add comment avatars to your comment section with just a few clicks.

Here is what you should do:

1. Go to Settings>Comments in your Blogger dashboard, and ensure the "Show profile images on comments" setting is set to "Yes" (this appears near the bottom of this page).
2. Check a post page on your blog which has some comments to see if any comment avatars appear.
3. If no comment avatars are visible in your layout, go to Layout>Edit HTML in your Blogger Dashboard and click the "Revert widget templates to default" link near the bottom of the page. Warning - only do this if using a standard, uncustomized Blogger template!
4. After completing these necessary steps, comment avatars should now display to the left of comments on your posts.

How to add comment avatars to customized/non-standard Blogger templates Soufiane of Le Blogger kindly emailed me details of the code we can add to customized Blogger templates in order to make comment avatars appear beside our posts (take a look at this post for the original details, in French).

It seems the method for us to use is far simpler than my initial impressions - we need only add two small sections of code to our templates in order for the comment avatars to function.

Here's what to do:

1. Go to Layout>Edit HTML in your Blogger dashboard, and ensure you check the "Expand widget templates" box.

2. Using your browser's search function, locate the following line of code (or similar):

<dl id='comments-block'>

Depending on your particular template, you may discover this is instead.

3. Replace this line of code with the following:

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

Note : if your template included div instead of dl, leave this intact and replace all other elements of the line instead.

4. Now, locate this line of code (usually a few lines further down, depending on your particular template) :

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

Immediately before this line, paste the following section of code:

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

If you use an "author comment highlighting" hack in your template, you will need to search for a second instance of <a expr:name='data:comment.anchorName'/> and paste the code a second time.

5. Finally, save your template.

Now when you view a post page for which comments are enabled, you should see avatars beside the names of respective commenters!