Quick Tip - Change Avatar Size In Blogger Comments

comment avatar
To change the size of an avatar (the little picture shown in comments). This simple CSS will help you to change the avatars size in Blogger comments. For changing the style and size of avatars, we should add simple CSS codes in our Blogger template. The default size of an avatar is 32x32px but we can change the size of avatar using CSS.

Change Avatar Image size

- 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css

- 2. Copy and Paste the following code into the Css Section then click Apply To Blog.
.comments .avatar-image-container{background-color:#fff;border:1px solid #ccc;width:64px;max-height:64px;margin:0 10px 0 0;padding:0}
.comments .avatar-image-container img{max-width:64px;height:64px;margin:0;padding:0}
* If you are using old blogger commenting system

.avatar-image-container{border:1px solid #ccc;margin-left:-30px;border-radius:4px;background:#fff;height:70px;min-height:70px;width:70px;min-width:70px}
.avatar-image-container img{background-size:100%;width:70px;min-width:70px;height:70px;min-height:70px}
3. If you want bigger/smaller avatars, change the values in red.
4. Save the template. and Done!  :)

3 comments :

  1. Nice piece of work...i changed my avatar using with this tricks in my site www.quizvook.com...Thanks a lot admin...

    ReplyDelete
  2. Being a blogger your shared information is very helpful to show a new look to blogger's avatar. With the help of changing the size of avatar we can get attraction from visitors.

    ReplyDelete