How to Fix The Blogger Comments Avatar Image

Respons: 1 comments
Rounding the Blogger Comment Avatar
This is a Quick Trick to Show the Blogger Comment Avatar Image Properly. I saw in many blogs Comments avatars. those are Improper in size. This is because of the CSS of both Default Comments System and Threaded Comments. which are present in your template and showing the avatar image improperly. here is the Quick Tip with css to Reset the Avatar image and Style the Image.

HOW TO FIX THE IMPROPER BLOGGER COMMENTS AVATAR IMAGE?

This is Reset CSS for Comment Avatar Image and is works for both Default Comment System and Threaded Comments System.
  1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
  2. Select the Template > Click on Edit HTML > Proceed
  3. Search for ]]></b:skin> and place the below code before it!
    .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;
    }
    Note: Default size it set to 50px. if you want Change the avatar size then simply modify the above CSS.

HOW TO ROUNDING THE BLOGGER COMMENT AVATAR IMAGE?

In comment someone asked me to Rounding the Avatar image in blogger comments. here is the CSS for it!
this css will reset the avatar size to normal and rounds the Image.(so don’t use the above CSS) ;)
Search for ]]></b:skin> and place the below code before it!
.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;
}
Note: Default size it set to 50px. if you want Change the avatar size then simply modify the above CSS.
If this post is helpful to you? then please share it! Thanks!.
Email Newsletter
Join Over 300 Subscribers ! Get Our Latest Articles Delivered to Your email Inbox
When signing up you will initially receive a confirmation email requiring your approval to complete the Subscription.

Copyright © How to hack | Learn Ethical Hacking : Tricky Hacker

Sponsored By: Gratis Designed By: Habib Blog