How To Customize Comments Avatar Image In Blogger

SHARE
Customize comment avatar image in blogger
In our previous post, we knew how to customize comment box in blogger template and this time we are going to customize the comment's avatar image which appears in the left side of every comment. The default style of it is little dull so we will make it more stylish and eye catchy by use of CSS effects as we did for comment box earlier and by using our own image for default avatar image which makes it more professional. So let us begin with the tutorial step by step.

Steps To Customize Comments Avatar Image In Blogger

If You Are Using Custom Template!

Step 1) As always, go to Blogger Template Edit HTML.

Step 2) Now you need to find a piece of CSS code (Whole CSS code of your template goes between <b:skin> Your CSS Codes </b:skin>). So press ctrl+f or cmd+f and search for the code .avatar-image-container { and select whole CSS of this class and replace it with the above CSS code [ Example: .avatar-image-container { CSS Code Of This Class} ].
.avatar-image-container {
background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SxL-DRXzmWI/AAAAAAAACY0/d1g3ymxGLEQ/s400/avatar.gif);
width: 36px;
height: 36px;
box-shadow: 0px 1px 9px #666;
border-radius: 50px;
border: 1px solid #fff;
}
In above CSS code, I have highlighted the image URL which is the default avatar image used by blogger if the commentator has no avatar image.

You can replace this image URL with your own image URL to which you want to make default avatar image.

You will see this .avatar-image-container class highlighted several times in group or alone if you searched for it using ctrl+f or cmd+f.

Now check other highlighted classes' CSS code where height and width will be 36px in most of the cases but in one class usually .avatar-image-container img { you will find that max-height, max-width or height or width is 32px. If that is the case then change those values to 36px and save your template. You are done.

If You Are Using Default Template From Blogger's Gallery!

In case you are using default template or any other template from blogger's template gallery itself then you just need to find this piece of code given below:
#comments .avatar-image-container img {
  border: 1px solid $(image.border.color);
}
And replace it with the CSS code given below. Now save your template and you are done!
.avatar-image-container {
background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SxL-DRXzmWI/AAAAAAAACY0/d1g3ymxGLEQ/s400/avatar.gif);
width: 36px;
height: 36px;
box-shadow: 0px 1px 9px #666;
border-radius: 50px;
border: 1px solid #fff;
}
.comments .avatar-image-container img {
width: 36px;
box-shadow: 2px 2px 0px rgba(0,0,0,0.13);
}
.comments .avatar-image-container img {
max-width: 36px;
}
.avatar-image-container img {
border: none;
}
In above CSS code, just replace the highlighted image URL with your own image URL to change the default comment avatar image.

So this is how you can customize comment avatar image and I hope this tutorial was helpful for you. If you liked it then please do share as sharing is caring :) and also let me know if you are facing any problem or you have any other question!

Recommended: Change "0 Comment" or "Post a Comment" Message in Blogger

Stay safe and happy blogging pals!
Author

Article By: Satbir Patial

I manage this blog and post tutorials related to Blogger, SEO, Plugins, Widgets, Software Tools, CSS/HTML and Social Media. Did you find this blog helpful? Would You Please Socialize? Thanks for Your Support Buddy :)


Stay connected, You'll not be disappointed!

3 Replies so far - Join Conversation

  1. Anonymous02:20

    Hi! I just wish to offer you a huge thumbs up for the excellent information you have right here on this post.
    I am coming back to your blog for more soon.

    más info en nutricion deportiva

    ReplyDelete
  2. Cool, but I'm in a confused state right now, advice me Satbir, blogspot or self hosted wordpress, which is better? Which should I go with? Reply needed urgently. Thanks.

    ReplyDelete
    Replies
    1. Cirphrank :: Hi,
      You can go with WordPress or blogspot. Both are good platforms. WordPress is better in many ways because of the magic of plugins but is not free. Blogspot is free and we have to take care of many things ourselves but there are thousands of tutorials available for almost every single topic/problem.

      Blogspot will help you to learn to code and customize your blog the way you want all yourself and WordPress will make you to depend on third party services, plugins, themes and all that.

      Hope it helps!

      Delete