Helplogger Blogger tips, tricks, tutorials and widgets.
  • Home
  • about
  • contact
  • Sitemap

How To Change Avatar Size In Blogger Comments

Posted by Manthan in: blog design Comments How to
This simple trick will help you modify the avatars size in Blogger comments whose default size is of 36px... pretty small considering that a lot of sites these days are using much larger avatars. To change the style and size of avatars is very easy - 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 the Edit HTML button


...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 it:
]]></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), copy and paste one of the following codes just above it:

[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/AVvXsEhSuvhpqMRWl5s8h_KLcy1Xm5176kPQfxYVtYe8nnuUxr5ylfNUQW7z9SUfT5DlJmCxD_8uT5crFuoKLP_UEc9V_lxIFQdjjxrjFDFB-AoHPoFz7uD4Yrh6hQaMkOoLAw9lrfzzEip61h0/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 red. To change the anonymous avatar, replace the URLs in blue with your own. (works only for the old commenting system i.e. that has no reply option)

Step 4. Cick on the Save template button to apply the changes.

That's it. Now the Blogger comments avatars should look bigger.

0 comments:

Post a Comment

Newer Post Older Post Home

About Manthan Dudeja

Manthan dudeja Manthan dudeja is the founder of Helplogger, He is a young Blogger ,Web Designer, Graphic Designer and owns his popularity to the fact that he posts genuine contents to his blog and believe in good rituals. He is young and truly innovative in his work At helplogger he mostly writes about How to blog tips, Tech news, Gadget Reviews etc. Countinue Reading

Popular Posts

  • (no title)
    Dual whatsapp Happy Diwali SMS Happy Diwali Whatsapp Status, SMS, Messages and Wishes Happy Diwali Shyari in Hindi Happy Diwali Shyari...
  • Add a forum on your Blogger blog with Nabble
    Forum is a platform where visitors can interact with each other and discuss different hot topics. There you can add desired topics for getti...
  • Happy Veterans Day 2016
    Happy Veterans Day Quotes, Messages, Card Sayings, Thank You Giving Veterans Day Wallpapers Images Photos 2016
  • Add Floating Social Media Sharing Buttons To Blogger
    The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times ...
  • Related Posts Widget with Thumbnails and Summary for Blogger
    There are several tutorials quite old in which I have shown different methods for displaying related posts in Blogger [ 1 ] [ 2 ] but in th...

About This Blog

Helplogger.in is a blog for Tech Geeks and Bloggers where we share fresh and updated information related to Internet, Social Media, Gadgets, Blogging, How-To Guides, Internet Marketing, SEO and much more related to Technology. You can check out about the admin of the blog here and check out our Sitemap.

Quick Navigation

  • Home
  • About Us
  • Contact Us
  • Privacy Policy

Follow Manthan Dudeja

Follow us on Facebook Follow us on Twitter Follow us on Google+

"© Copyright 2014-2016" · All Rights Reserved · And Our Sitemap · All Logos & Trademark Belongs To Their Respective Owners·
Website designed by Manthan dudeja.