Change Blogger Default Comments Avatar Size

The blogger commenting system is a very important section of the blog. This is why it is necessary for us to make it look nice and also eye catching. As a designer i love customizing the blogger comment avatar size. 
If you want to increase or decrease the width of the default blogger comments thumbnail or avatar, you can easily do it, if you fully follow the below procedures. Another aspect of increasing the thumbnail size, is a problem which happen to make the images blurry but not to worry, i will provide an easy fix.

Increase Blogger Comment Avatar Width

Step 1

Logon to blogger.com and locate the edit HTML section in the template customization.

Step 2

Using CTRL+F search for ]]></b:skin>

Step 3

Copy the below code and paste it just above ]]></b:skin>

.comments .avatar-image-container{
background-color: rgb(34, 34, 34);
border:1px solid #ccc;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
width: 64px;
max-height: 64px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 64px;
height: 64px;
}

Step 4 – Customization

Replace the below codes within the above line of CSS to change the default settings.
width:64px; – Replace with any value to increase or decrease the width of the image container.
height:64px; – Replace with any value to increase or decrease the width of the image container
max-width: 64px; – Replace with any value to increase or decrease the width of the image.
height: 64px; – Replace with any value to increase or decrease the width of the image

Step 5

Save your template. 
Visit your blog. Do you notice the difference in the comment section?. But something doesn’t look right. The avatar is bigger but it’s blurry, so we need to increase the thumbnail resolution in other to make it look clean and perfect.
Check out my previous post on Increase Blogger Comment Avatar Resolution to make the comment images look better.
Sharing is caring! Have any questions? share them with me at the comment box and be sure to get a quick response.

Related Articles


Leave a Reply