Fix Impoper Blogger Comment Avatar Image

Blogger comment has an avatar image of the comment publisher either with google+ id image or with blogger unknown image.The image set in comment avatar won't be same for all and look different.Some of modern templates now with this fix but older templates need to be optimized with CSS code.

We had already shared a post about blogger threaded comments and also you can apply the highlight author comments with this post and customize the blogger comments.

Fix Blogger Comment Avatar Image

• Log in to Blogger Dashboard.
• Then click template and click proceed.
• Then now expand widget Template.(Tick Check box)
• Now search for ]]></b:skin>
• Then above that Code copy and place the below code

.avatar-image-container,
.avatar-image-container img{
max-width:40px !important;
width:40px !important;
max-height:40px !important;
height:40px !important;
padding: 0 !important;
border:0px;
}

Here we give default height and width of the comment avatar image as 40 pixels you can alter the value.

Then save the template  and look for comment and all the avatar images have default height as 40pixels.

Blogger Round Comment Avatar Image

Blogger comment image is as default as what the visitor gave them in the google + profile.But for look different we add some CSS code to make them round shape.This is done by giving border to image with radius.

• Follow the above steps instead of the above code insert the below code.

.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;
}

Those highlighted codes are responsible for making the square image as rounded.You can alter the value to give rounded square or rounded rectangle.