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.

1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template > Click on Edit HTML > Proceed
3. 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. →

Posted in: Blogger Comments, Blogger Tricks, Blogging