Tutorial # 39 - How To Change Avatar Size In Blogger Comments

This tutorial will help you modify the avatars size in Blogger comments whose default size is of 36px. To do so, you just need to add the CSS code in your Blogger template that will make size of avatars to have width and height of 64px.

Step 1: Go to Dashboard > Template, Click on "Edit HTML"

Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 2: Type or paste this tag inside the search box and hit Enter to find ]]></b:skin>
Note: you may need to click on the arrow next to it and then search this tag again.

Step 3. Depending on which comment system you use (with reply/no reply OR threaded/non-threaded), copy and paste one of the following codes just above the code ]]></b:skin>:

[Works in Blogger threaded comment system]
.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;
}


[for old blogger commenting system]
.avatar-image-container{
border:1px solid #d6d6d6;
margin-left: -30px;
-moz-border-radius: 4px;
background:#fff;
height:70px;
min-height: 70px;
width:70px;
min-width:70px;
}
.avatar-image-container img {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSw9NmYTpHGetAlQe-WsYsOpjMk1mX74ZvHWMx0q18ORAabnxOQwkiujCnmDZlbTDzFHClDvOscwnLmsbvNxECVI6ODGDqHNM6o1yPM-wnXFqCee4agtWggjPFa0TMLXVJFbw1c8jXREM/s200/anonymous.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:70px;
min-width:70px;
height:70px;
min-height:70px;
}

Note: For bigger/smaller avatars, change the values in width, max-height, max-width, height; and height, min-height, width, min-width, width, min-width, height, min-height.
To change the anonymous avatar, replace the URL with your own. (works only for the old commenting system i.e. that has no reply option)

Step 4: Click on the Save template button, and you're done. Now the avatars should look bigger.