Monday, April 02, 2012

Frameless Picture in Blogger

In the default template in Blogger, your picture or image will have border and shadow automatically. It is nice and the design is good.

But I prefer all my pictures are frameless. As you see at the below two pictures, with and with no frame. It is just simpler and cleaner. This article is sharing how to remove border and shadow from pictures or images, make it frameless. This tutorial only applied to old Blogger interface.

Open Blogger Administrator, click Template from the left bar menu. Blogger Template Designer screen will be opened. Click Advance from the left menu. Scroll down the menu next to it, click Add CSS. Add the following code:

.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; }

Press Enter after the character } at the end of the line. Then click Apply to Blog button at the right top corner. Your border and shadow frame will be gone.

I use Blogger old/standard template, if you use Dynamic Template you can follow this tutorial.

SourceRemove Blogger Picture Shadow and Border


Lois D. Owens said...

I like very much frame for my picture.I think any (portrait or landscape) all of them look better.

Allan said...

Hello ! Thank you for the tutorial, its way better now thanks to you!