Add Blogger Avatar in Comment Section

How to add Avatar in Blogger Comments?

This trick will add Avatar in Comment Section in blogger posts. This trick is only for those templates in which avatar is not showing.

Actually blogger add this feature very recently in blogger or blogspot templates. It is inbuilt or in default for blogger templates now. But for those templates which are older and made before this feature you have to add few lines of code which i will tell you step by step.

Note: First backup your current template by download it. For download go to Layout, Click "Edit Template" and Download Full Template, Save it to your PC hard drive at appropriate location for easily find.

Now For Adding Code in Template

Step;1 - First Mark Box of  "Expand Widget Templates" this will expand the template to full.

Step; 2 - In template find this line in color box below, You can find it easily by pressing Ctrl F by your key board, a popup box will appear copy and paste this line in box and click search, if line is there it will highligt, if not pressent box will show message not found.

<dl id='comments-block'>

Step; 3 - Now replace the above line with line given in color box below.

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

Step; 4 - In this step find this line given in box below just like find in step-1

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

Step; 5 - In step five replace the line of step-4 with this whole code given in color box below.

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

Step; 6 - Now Save the template and proceed further.

Step; 7 - This is the step for adding default image. For adding this find this line ]]></b:skin>you can find it by scrolling down, for easy find unmark Expand Widget Templates.

Step; 8 - Place given code in color box below just one step above line find out in step-7.

.avatar-image-container {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkkFzSpE97KcYZGK7v-kEjCkVIwa_6sA-oF7Yc9SF9eFP9_S1_i8OqxXSscHpvqhaOjWt9ypT6zN22MyqbzPwog71rcwDMDimLOSitYH40QmJx8f5A2af0hfS9gwoE3V64ugxebqRQzjI/s1600-h/AvatarBlogger.png); width:35px;height:35px; }
.avatar-image-container img { border:none;}

Save template and you have done. See you post having any comment to check if this hack working.

Important : I have noticed that many template have not line ( ) for this type of template you have to done little more work. So i have add more steps for this type of templates.


Step; 9 - If above hack didn't worked. Find line given in color box below like as in step-1.

<b:loop values='data:post.comments' var='comment'>

Step; 10 - Place this code in color box below just after the above line in step-9. In this case step-5 Ignored.

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

Save the template and Check if its worked

Share: