How to remove border and shadow from blogger image

how to remove border from blogger image
If you add any picture in Blogger, by default Blogger sets shadow and border around the image. Here we will discus how to remove border and shadow from blogger image.

Steps to remove photo border in Blogger :

Step 1: Go to Blogger dashboard and navigate to Layout > Template Designer to open Blogger Template Designer window
how to remove photo border in blogger

Step 2: Click on Advanced > Add CSS and add below CSS script inside 'Add custom CSS' box

blogger tips and tricks      .post-body img, .post-body .tr-caption-container {
      padding: 0 !important;
      background: none !important;  border: none !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      -moz-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;   }


Step 3: Now click on 'Apply to Blog' button on top right hand corner to save changes and we are done; refresh your webpage and you should not see shadow or border around images.

If you want to remove border from other blogger images as well like profile picture or bloglist image, you have to include those css classes also. To get rid of the border around all pictures in blogger, add below CSS script.
              .post-body img, .post-body .tr-caption-container, .BlogList .item-thumbnail img, .Profile img, .Image img
              {
              padding: 0 !important;
              background: none !important;
              border: none !important;
              -webkit-box-shadow: 0px 0px 0px transparent !important;
              -moz-box-shadow: 0px 0px 0px transparent !important;
              box-shadow: 0px 0px 0px transparent !important;  }


If you still see shadow and border around pictures in blogger, then you need to modify your blogger template. But before editing blogger template, test it once again - close and refresh browser and open your blog.If you still see same behavior, then follow below steps to do script change.

Step 1: Goto Blogger dashboard > Template and click on 'Edit HTML'

Step 2:
Before doing any changes in blogger template, always take the backup of blogger template. If anything goes wrong, you can revert all changes from backup copy.

Step 3: Search (crtl+f) for the statement '.post-body img' and from that block, remove below script

padding: 8px;
blogger remove border around images
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-moz-border-radius: $(image.border.radius);
-webkit-border-radius: $(image.border.radius);
border-radius: $(image.border.radius);


After change, block should looks like below
.post-body img {
}

Step 4: Once changes are completed, click on 'Save Template' to save all changes.
Now reload your website and verify shadow and border have been removed from images or not.

Need any help? 
If you have any doubt, please let us know. 
To know more about blogging tips and tricks, follow 'BlogTlog' on Facebook / Twitter / LinkedIn / Google+.
Sharing is Caring, so please share this with your friends.

No comments:

Post a Comment

Thank you for your valuable comment. It will be published soon.