How To Enable Avatars in Blogger Comments - TRICK BAZAR

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.

comment avatars in blogger

Method 1

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

2.Enable Show profile images on comments.

Enable Avatars in Blogger 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.

Enable Avatars in Blogger Comments

3.Now Click on "Save Settings".

4.Go to Layout- -> Edit HTML.

5.Click on "Expand Widget Templates".

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE6W5srgk6ltdaBzfN9bw9LYEI-JXr2SHxfrl9RbfEBcU-Kv8-Ycii78BHxmMteJNqPTLh4-08rO2PvpvHCrB5o8pkA1ehFU2z0cbeK9k6Lrf50G3paHvqZtxPflIw1njrmgcL8V_a0MDo/+avatar.png);
width:35px;
height:35px;
}


11.Save your template and you are done.

Post a Comment