How to show avatar's on blogger comments?

Now you can also add avtars to user comments as you have seen in various social networking sites. Avtars are small pictures of users.

Visit here for full demo of this widget.


To add avtar follow these simple steps-

1. Go to Blogger > Settings >Comments and enable “Show profile images on comment”. If you are using third party template then you have to add some html codes.

2. Go to Blogger Layout >Edit HTML and backup your template. Expand the widget templates and look for following code present or not

'data:post.avatarIndentClass'

If it is not present then look for

<dl id='comments-block'>

And replace above code with following one

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

3. Now look for

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

It may present more than 1/2 times. So replace each of it with

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

4. For Anonymous users with no profile pictures you can set a picture. Look for code

]]></b:skin>

And add following code just ABOVE of the above code.

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(http://4.bp.blogspot.com/_tbHfaj1A058/SrzTu7NmpGI/AAAAAAAAHhQ/iw9fuRMO_aU/s1600/anon.png);width:50px;height:50px;}



Or you can use different code for following picture



.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(http://3.bp.blogspot.com/_u4gySN2ZgqE/SrSUS1YpxwI/AAAAAAAAAv4/DihiWlWRxQs/s400/grav.png);width:50px;height:50px;} 




If you want bigger avtar pictures then add following code instead of above

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(http://4.bp.blogspot.com/_tbHfaj1A058/SrzTu7NmpGI/AAAAAAAAHhQ/iw9fuRMO_aU/s1600-h/anon.png);width:50px;height:50px;}

Here you can also set height and width of avatar.

Happy Blogging.

Posted in: Comments Issues,Edit Customize Template

Related Posts