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:

Read More

Code for Related Post Widget for Bloggers

Code for Related Post Widget for Bloggers

With Implementing this Code in your Template you will able to show your visitor Related Post Articles in every post at the end. This widget show all related post which have same labels so include as many labels as possible in every post below right hand side box in your  editor. But remember these label should really related with post otherwise you will make this widget source of spam. So do not add labels which are not in any way related to that specific post.


Now here is Code and Implementation guide how to add this widget. But before making any changes you have to download your current Template by Click Download Full Template at top in Edit HTML section with this backup you will be able to revert template to its original state if any problem occurred during adding this widget.

Step. 1- Login your blogger account.

Step. 2- Click Dashboard then Layout then Edit HTML, Take backup of your template as said above.

Step. 3- Click Expand Widget Templates box  above at template editor.

Step. 4- Search </head> tag it will be somewhere in middle your template, if you are not able to find it then press ctrl f ( control f) in your keyboard a popup box appear, search this tag by copy pate in this search box.

Step. 5- Copy and Paste given code below just one line above it as shown below.

Share:

Read More