How to Fix The Improper Blogger Comments Avatar Image
This is a Quick Trick to Show the Blogger Comment Avatar Image Properly. I saw in many blogs Comments avatars. those are Improper in size. This is because of the CSS of both Default Comments System and Threaded Comments. which are present in your template and showing the avatar image improperly. here is the Quick Tip with css to Reset the Avatar image and Style the Image.
How to Fix The Improper Blogger Comments Avatar Image?
This is Reset CSS for Comment Avatar Image and is works for both Default Comment System and Threaded Comments System.
- Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
- Select the Template > Click on Edit HTML > Proceed
- Search for
]]></b:skin>
and place the below code before it!.avatar-image-container, .avatar-image-container img{ max-width:50px !important; width:50px !important; max-height:50px !important; height:50px !important; padding: 0 !important; border:0px; }
Note: Default size it set to 50px. if you want Change the avatar size then simply modify the above CSS.
How to Rounding the Blogger Comment Avatar Image?
In comment someone asked me to Rounding the Avatar image in blogger comments. here is the CSS for it!
this css will reset the avatar size to normal and rounds the Image.(so don’t use the above CSS)
Search for ]]></b:skin>
and place the below code before it!
.avatar-image-container,
.avatar-image-container img {
max-width: 50px !important;
width: 50px !important;
max-height: 50px !important;
height: 50px !important;
padding: 0 !important;
border: 0px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
}
.avatar-image-container{
border:3px solid #fff !important;
-webkit-box-shadow: 0 1px 2px #BBB;
-moz-box-shadow: 0 1px 2px #BBB;
box-shadow: 0 1px 2px #BBB;
}
Note: Default size it set to 50px. if you want Change the avatar size then simply modify the above CSS.
If this post is helpful to you? then please share it! Thanks!.
Leave your comments. →
Thanks for sharing this tutorial master
Very useful for me
This is a nice tip , i used it in my blog and it is working fine , thank you
I understand that you specialize at Blogger could you share the code for using in WordPress…
Thank you. I have already solved problem with own ways
good
so cute..
i take it Bro
Thanks
Thanks for the tip, Was getting confused why the Comment Avatar image were looking a bit different.
I’ve tried this. but the image is getting blurred, when the width and height are increased, even if I use width 50px and height 50px, the image isn’t clear. Any fix?
The avatar images are fixed size of 36px. but we are increasing the size with css. so it looks blurred. but it is not a big issue.
My problem is fixed now. Thanks Harish
Superb work bro !!!
Works perfectly for me
nice trick.. it’s really useful… thanks
thanks you areawesom
Nice Post Harish, can I know how to make the comment avatar into square image with border color ?
Remove the border radius properties and add the solid border.
Thanks Harish,this post really helpful for my blog since last month this problem face my blog ,now solve problem using this post you will visit my open any post see comment section thanks again….
its work, i shared it.
Thanks, its work
rounding code ist not working on my blog :/
Thank you so much for this tutorial. It works perfectly on one of my blog. However this trick only works on Desktop version of templates. How can we show that Round Avatar in mobile template of blogger? I hope i will get a reply.
PEACE!!
The result make me smile, thanks for sharing.