Tuesday, October 13, 2009

How to remove image border in Blogger

In certain Blogger templates such as Minima template, there is an image border given automatically everytime you upload your photos or images to your blog. Sometimes you need to remove it or change it all the image borders around all your images that appear in your posts.

Here are the example of image with border and without border:



How to remove image border in BloggerHow to delete image border in Blogger

How to remove image border in Blogger, here are the steps:

  • On the dashboard, navigate to Layout – Edit HTML.
  • Download your existing Blogger template for your back up by clicking “Download Full Template” button.
  • Find the below code in your template (no need to tick the Expand Widgets Templates box). Note: the code in Blogger blog templates varies but the code below is the code we will find on a Blogger Minima template or most other default Blogger templates.

    .post img {
    padding:4px;
    border:1px solid $bordercolor;
    }

    or if you could not find those code, find these code below:

    img{
    padding: 4px;
    border:1px solid $bordercolor;
    }
  • When you have found it, you have two ways to delete or remove the unwanted border image code. You can either delete the following line:

    border:1px solid $bordercolor;

    or change the border pixel to zero, like this:

    border:0px
  • After that dont forget to click "Save Template" button and start to admire your new post images without the image border.

To increase the width of your image border, just simply change the pixel number from 1px to 2px or 3px etc.

How to remove the border of an image of a single post and leaving the rest alone with their borders?
In this case then you can edit your post which contains the image that you want to remove its border, go to "Edit Html" mode and insert this following code inside the image source tag of the image:

style="border:none;"

so the code should then appear like this:

<img src="image location" style="border:none;" />

No comments:

Post a Comment