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
- Now, search this code
- Replace this code (even you find it more than once) with new code given below
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<a expr:name='data:comment.anchorName'/>
<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
- Place new code just Before searched code
- Save Your Template, that's it !
]]></b:skin>
.avatar-image-container{background:url(http://alturl.com/xbwk); width:35px;height:35px; } .avatar-image-container img { border:none;}
Note: Change http://alturl.com/xbwk to your own default image
No comments:
Post a Comment