Friday, 22 June 2012

Remove Blogger Post Image Shadow and Border

Have you ever attached images in your posts? Most probably the answer would be 'Yes'. But after publishing your post, you may have seen that your image has a shadow and a thick border around it. Sometimes you may wonder how it appears after publishing the
post, 'cause if you go back and edit your post again, you won't find any border or shadow there. So you have nothing to do at the Post Editor to remove border or shadow. You may find no clue about that. But that shadow and border appears around your images may still bugging you. Are you still wondering how to get rid of such shadow and border appears on your images in Blogger?


The above picture shows you what exactly I'm talking here. Do you see white border and shadow around the image? Yeah, that's how it appears. The reason is in some Blogger blog templates, there are default CSS styles defined for images. So if your template is one of it, it will add this border and shadow for each and every image you add to your posts. It renders when you view your blog but not in Post Editor. As I said, the cause is CSS styles and the solution would be changing default values. Then you can get rid of this shadow and border around your template. So let me help you to show you how to change your image style values defined in your blog template.

Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Navigate to Template tab from left pane.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML button.

5. Now click Proceed button to view Template Editor.

6. Tick on Expand Widget Templates.

7. Search for ]]></b:skin> in your template and add following style code snippet, right before the ]]></b:skin> line.

.post-body img {
padding: 0px !important;
background: none !important;
border: 0px solid $(image.border.color) !important;
}

Color Indication Information

- Image Border Width in Pixels

8. Now preview your blog and save template.

Enjoy :-)

0 comments:

Post a Comment

Your Comment Posted After Approved.