Friday, 23 September 2011

Remove Blogger Image Borders

By default, Blogger places a shadowed border around all images. Now, you may like the border and you may not. If not, keep reading as I will explain how to remove the border from all images.

You will need to make some changes to the template of your blog. There are a few steps involved, but it's a fairly simple process:

  1. Click on the design option and then select Template Designer.
  2. From the design screen click the Advanced option.
  3. Scroll to the bottom of the advanced options and select 'Add CSS' (see fig below).
  4. Cut and paste the following into the custom CSS pane:
.post-body img {
    border: 0px;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);

The CSS should have an immediate effect and you should find that your images loose the border. If you are happy, click the 'Apply to Blog' button and your changes will be saved.

Adding custom CSS

No comments:

Post a Comment