How To Enable Avatars in Blogger Comments

 

If you use this hack,you can show Show Blogger Profile Images In Comments As Avatars.For your safety,first backup your blogger template.To Enable avatars in blogger/blogspot comments follow the steps below.If first method doesn't work for you,then follow the second method.

Method 1

1.Login to your blogger dashboard--> Settings- -> Comments.

2.Enable Show profile images on comments.

3.Now Click on "Save Settings" and you are done.

Method 2

1.Login to your blogger dashboard--> Settings- -> Comments.

2.Enable Show profile images on comments.

3.Now Click on "Save Settings".

4.Go to Layout- -> Edit HTML.

5.Click on "Expand Widget Templates".

6.Now search below code in your template.

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

NOTE: If you can find above code no problem.But if you can't find it then search:

<dl id='comments-block'>

or

<div id='comments-block'>

in your template.

Now Replace it with:

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

7.Now find below code:

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

Note:You can see above code one or more time.

8.Now Replace every above code (<a expr:name='data:comment.anchorName'/>) with below code:

<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>

9.Now find ]]></b:skin> tag in your template.

10.Copy below code and paste it just before ]]></b:skin> tag.

/* Avatar */
.avatar-image-container img {
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SxnvaGA8qdI/AAAAAAAAAc0/0b9ZY2P2P0A/comment+avatar.png);
width:35px;
height:35px;
}

11.Save your template and you are done.