Search Suggest

How To Customize Comments Avatar Image In Blogger

Blogger allows you to customize default comment avatar image with simple css. This article will guide you through that.
Customize comment avatar image in blogger
Today I am going to show how 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.

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

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.

Recommended: How to Customize Comment Box In Blogger


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: Completely Remove Blogger Commenting System and Fresh Install Disqus System(Load On Demand)

Stay safe and happy blogging pals!
4.94 / 169 rates

Loved what you read?

Sign up for The Best Bits. Opt-out any time.
We do not spam!

Not into email list things, but still want to read more?
Follow us on Twitter

8 comments

  1. 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
    1. Great Info. Tweaking the css does the job also.

      Though I added a javascript and it worked just fine.

      I searched for

      Then added the below code above .

      < script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-56660f25d6d601d0' type='text/javascript'/>
      < script>
      var oldSrc = '//img1.blogblog.com/img/blank.gif'; //Default blogger image link
      var newSrc = 'https://3.bp.blogspot.com/-UNjtW9_9fcs/VrvrBJi_8CI/AAAAAAAABP4/jjFMkoCi6Ig/s1600/blank-user-avatar.png'; //New image link
      $('img[src="' + oldSrc + '"]').attr('src', newSrc);


      Kindly remove the space from the code. Hope this helps also

      Am an Editor at Techkibay
  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.
    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!
    2. Satbir Is right!

      Arguably, both platforms have an edge over each other.
  3. dollar ground is saying, perfect work.
    Thank you
  4. test
  5. Thanks, it works perfectly on one of my clients blog, the background image is blured. Can I change it to a different one?