How To Customize Comments 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlF7X1bKlMcF5qXsxQ8a6W4k8eqU2R-cPBdrN1djVUUARSSiczanKGZnaJw0afSXpu-0pmK7jKp6OxJBadNWM5ZFtSAoN1Y6j7R-Hb-sdSXOQUTRPMHG45Fk3IqAGDXPuVzZskjw22JVxZ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlF7X1bKlMcF5qXsxQ8a6W4k8eqU2R-cPBdrN1djVUUARSSiczanKGZnaJw0afSXpu-0pmK7jKp6OxJBadNWM5ZFtSAoN1Y6j7R-Hb-sdSXOQUTRPMHG45Fk3IqAGDXPuVzZskjw22JVxZ/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!

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

How To Customize Comments Avatar Image In Blogger

4/ 5

By Editorial Board

Posted By Editorial Team On March 07, 2014 2 Comment