Show avatar or picture in comments

Showing your images on comments section is something really cool for all the readers and the bloggers. This shows the importance of the commentator and has a good appealing effect for everyone to comment.

This is the example of how the comment avatars are shown

By the way if you read these comments you might be wondering about the post on which these comments are given.

These comments are on blogging tips in detail it’s a great topic for starters and have a lot of facts and realities please read it.

Ok now coming back to the topic to add avatars to your comments you need do the following things.

Show profile pictures on comments:

Go to blogger

First of all back up your template for safety reasons.

Edit HTML

Check expand widget template

Find the following code:

 

Replace it with:

 

Now find the following code:

 

Note: it may occur more than one time, if this is the situation you will need to replace all the occurring.

Replace the occurring with this code:

Customization of avatars:

By default it will be showing smaller images or favicon type images, but some comments may be missing photos or avatars.

If you need an image there then find

 ]]>

And just above it paste this code:

 .avatar-image-container {background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAAAAAAAAwA/xaGlRIqkHDw/s400/default.gif); width:35px;height:35px; }
.avatar-image-container  img { border:none;}

If you want bigger images like mine then this is the code to paste:

 .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;}

Highlighted text is the URL of the image. If you need some other image just change the URL.

Check your post by commenting on it.

Please comment on this post to see the effect.

One comment

Comments are closed.