How To Remove Blogger Picture/Image Shadow And Border in Blog of Blogger

Look at the 2 pictures on top of. each of them area unit nearly same. Except the second has borders outside. the primary one is clear and it's no shadow or border. and therefore the second is clear however there's a boudary outside of it. that one does one like?

If you're an everyday visitor of Blog of Blogger, then you ought to notice our pictures has no borders. in truth no borders at this time, previously out pictures has borders. Most of the time i prefer to use clear image with PNG extension. and out of doors of every image, there was a border that appearance terribly odd. however adding a CSS code removes this drawback.

By default, blogger blogs automatically add borders and shadows outside of your uploaded pictures. just in case of non-transparent pictures (maybe PNG, JPEG, GIF) it does not matter. however once you transfer a clear image with PNG format the borders look extremely odd. It affects the transparency of the image. tho' blogger template designer permits you to vary the shadows and borders of the photographs. however you cannot totally take away the borders.

If you are using the old Blogger interface:

Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you are using the new Blogger interface:

Go to Dashboard - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

Now your blogger images should appear without any border or shadow. Cheers!

Update:

If the above method doesn't work for you, do the following:

- Go to Blogger's Dashboard > Templete > Edit HTML
- Search Ctrl+F for the following code:

border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

- Delete it and Save template.

Video Tutorial

You Also Like:

Add 125px advertise here banners to blogger
Sliding Social icons with Hover effect for Blog of Blogger