Saturday, September 19, 2009

Blogger Post Image Borders Change or Remove

Sometimes you may want to remove, delete or change the image border of a custom Blogger template or default Blogger template (Blogspot template). In this Blogger tutorial you will learn how easy it is to make changes to your template so that you can get rid of unwanted image borders around all the images that appear in your blog posts or around a single image in a blog post.

You will also learn how to enhance your Blogger template (Blogspot template) by changing the line color and line style of the existing image borders.

Note this Blogger tutorial applies to custom templates and the previous generation of Blogger templates. If you are using the new default Blogger Template Simple please refer to my Blogger tutorial How to Remove the Image Border in Blogger template Simple for instructions

This Blogspot tutorial is rated easy. It involves making minor alterations to your Blogger template (Blogspot template) but this is well within the capabilities of beginner bloggers and newbies. The changes will take less than 5 minutes to complete and can make the world of difference to your Blogger template.

Blogger image with border Blogger image without border

How to Delete, Remove, Get Rid of the Image Border in Blogger Posts
The following instructions will remove the little border around the images in your Blogger posts.

  1. Login into Blogger if not already logged in

  2. From the Dashboard navigate to your blog. Go to Design > Edit HTML by clicking on the Design tab and then choosing the Edit HTML link

  3. Back up your existing Blogger template by clicking on the Download Full Template button

  4. Find the following code in your Blogger template (no need to check the Expand Widgets Template box as we are only working with the CSS Style Sheet). Note: the code in Blogger templates varies but this is the code you will find on a Blogger Minima template and most other default Blogger templates.


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

    If you do not have this code look for the following:

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

  5. There are two ways to get rid of the unwanted border image code. You can either:

    • Remove the following line:

      border:1px solid $bordercolor;
      or

    • Change it to the following
      border:0px;

  6. Click on the Save Template button

  7. Click View Blog to admire your post images minus any image border.

How to Change the Color of the Image Border Around Posts in a Blogger Template
The following instructions will show you how to change the color of the border which appears around images in your Blogger posts

  1. Follow Steps 1 to 4 as per removing the image border from Blogger posts.

  2. There are several methods to change the color of the image border but the easiest is to

    • Change the following line:
      border:1px solid $bordercolor;

      to
      border:1px solid #6698FF;

      The above change will make the border line color sky blue. To change the color (in red) to your own color choice replace with the hex color code for your chosen color

  3. Click the Save Template button to save your changes

  4. Click on View Blog to admire the new color around the images in your Blogger posts

Tips and Troubleshooting

  • To change the image border line style from a solid line to a dotted line change the word solid to dotted eg

    border:1px dotted $bordercolor;

  • To change the image border line style from a solid line to a dashed line change the word solid to dashed eg

    border:1px dashed $bordercolor;

  • To increase the width of the image border change the size from 1px to 2px or 3px eg

    border:3px solid $bordercolor;

  • To Remove The Image Border Around Only One Image paste the following into your image code in your Blogger post:

    style="border:none"
    eg
    <img style="cursor:pointer; cursor:hand;width: 126px; height: 22px;" src="http://3.bp.blogspot.com/_vLeiVavkV_M/SrRp2wb1I_I/AAAAAAAAAAA/XXXXXXXXX/s200/download-now.png" border="0" style="border:none" alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXXXX" />

In this Blogger tutorial you have learned how to remove, delete and get rid of the line border which appears around images in your Blogger posts (Blogspot posts). You have also learned how to change the line color of the border image to your own chosen hex color. In addition I have shown you how to change the line style from solid to dotted or dashed and to remove the border around a single image. As always any problems with making these changes please let me know. Good luck!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Remove the Image Border in Blogger Simple Template



Subscribe to Blog Know How by Email

14 comments:

Rohit said...

thanks for the wonderful posts...but i need a help..can u pls help me out...

what to do if i want to add html coding to my blog posts like in the above posts u have done.."that pls insert code after this code and all"..

but when i add some codes to my blog post and when i publish it ..the code is not there but it shows the results...

as i m planning to give my readers different codes for smiley icons and banners..

pls pls help me...

The Wizz said...

Hi Rohit. To show code you need to use HTML entities. So for instance you replace < with &lt. To quickly encode your code go to Centricle. Good luck!

Jason said...

Edit>Layout does not appear in my blogger control panel. Are you sure you are covering all the options here?

# Login into Blogger if not already logged in

# Navigate to Layout > Edit HTML by clicking on the Layout tab

The Wizz said...

Hi Jason. At the Blogger Dashboard you will be able to see a row of links for your blog - New Posts (button), Edit Posts, Settings, Layout, Monetize. You need to click on Layout and then the Layout Tab that appears in the row of tabs (Posting, Settings, Layout, Monetize, View Blog).

If don't see this then I wonder if you are using the Classic rather than the Layout version of Blogger. Classic is the old version and you will know if you are using it because the word Template will appear instead of Layout in the row links and tabs in the Dashboard area.

These instructions are written for the Layout version only. If your blog is fairly new (created in the last two years or so) Blogger would have set the Beta Layout version for your blog by default but you may have changed it for some reason.

To change back to the Layout version go to Template > Edit HTML, scroll to the foot of the template area and on the left there will be an option to revert back to Layout template. Once you save you will see that the word Layout will replace Template in the row of tabs.

Hope this is clear. Thanks for your comment. I have updated the post to make it a bit clearer. Good luck!

Catherine Boyer said...

This is a terrific blog. Very clear and understandable even for a relative blog beginner. I would like a week off so I can read the archives. : )

The Wizz said...

Hi Catherine. Welcome to Blog Know How. I hope you will schedule that week soon as there is a lot of reading to be done! If you sign up for email subscription or as a follower the drip feed method makes life a lot easier.

DANIEL said...

thanks for your tips
www.hugefreelancejobs.blogspot.com

Ashwin Patel said...

Thanks for your tips

http://teachmeknow.blogspot.com/

Anna said...

where abouts is the line of code to reove the border in an Awesome INC. template (one of the defaults)?

The Wizz said...

Anna please check out my new article which covers both the Simple and Awesome Inc Default Blogger templates. removing the image border in newest default Blogger templates

Dolly Daydream said...

Hi, when i try to delete the part in step 5, it wont let me? What am i doing wrong? :) Thankyou, great tips, just a silly me!

Tor said...

Thank you, this is fantastic! I use the Simple template, so I just had to delete an extra part:

-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);

Straightforward really. :)

Mobmani said...

Thanks for you tip it's wonderful i like it

used it on my blog : http://smsformobile2008.blogspot.com

Sara * said...

@Tor Thanks for your tip!

Post a Comment