Follow us on Facebook

Display Avatars Next to Comments In Blogger - Show Profile Pictures

Few days ago we were discussing how to make comments section more interesting so that your users love to leave comments. Changing comment form size and changing background of comments form were two very good methods to make the comment section look good. I just found another way to make it more awesome. That is adding an avatar besides comments of anyone. An Avatar is tiny picture that every blogspot user have. So, whenever a person will leave a comment, his/her picture will be shown next to his/her comment. That's an interesting idea.

How to Display Avatars in Comments - For Default Templates

If you are using default blogger template;

  • Go to Blogger Account > Dashboard > Settings > Comments and enable "Show profile images on comments?" option to YES.
  • Thats it. Now you will avatars are displayed in comments section

How to Display Avatars in Comments - For Customized Templates

What if you are using a third party/customized template in blogspot ? Don't worry, here is how you can show Avatars in customized templates.

  • Go to Blogger > Design > Edit HTML and check "Expand widget templates" option.

  • Search this code (simply press CTRL+F and paste this code)
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
Note: If you could not find above code, search this new code;
<dl id='comments-block'>
  • Replace this code with
  • <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  • Now, search this code
  • <a expr:name='data:comment.anchorName'/>
  • Replace this code (even you find it more than once) with new code given 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>

Show a Default Avatar

You can also place a default Avatar for those commenter who do not have an Avatar; 

  • Search this code
  • ]]></b:skin>
  • Place new code just Before searched code
  • .avatar-image-container{background:url(; width:35px;height:35px; } .avatar-image-container img { border:none;}
    Note: Change to your own default image
  • Save Your Template, that's it !

No comments:

Post a Comment



Like Us


Donate us For Furture