Blogger Tips
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.
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.
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.
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
Tips and Troubleshooting
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
- How To Add Borders To A Blogger Footer Blogspot
In this Blogger tutorial I expand on my previous article about how to add a 3-4 column footer to Blogger by showing you how add border styling to the new footer. You will learn how to add a border around all of your footer columns or around only part...
- Remove Image Border In Default Blogger Templates Simple And Awesome Inc
In this Blogger tutorial I show you how to remove the border around images in Blogger posts (Blogspot posts) when using one of the latest default Blogger templates Simple or Awesome Inc. If you are using an older generation Blogger template or a custom...
- Add Css Styling To Blockquotes In A Blogger Template
Today I continue the series of Blogger tutorials (Blogspot tutorials) by showing you how to apply CSS styling to blockquotes in a Blogger template. Other articles I have already published on the subject of CSS styling include: How to Add, Delete or Remove...
- Add A Post Divider Between Blogger Posts
In today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most...
- How To Align And Justify Blogger Posts
This is the second article in a series about CSS styling tricks and tips for Blogger written with Blogger beginners and novices in mind but suitable for all bloggers who want to customize their existing Blogger template. While the first article dealt...
Blogger Tips
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.
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.
- Login into Blogger if not already logged in
- 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
- Back up your existing Blogger template by clicking on the Download Full Template button
- 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;
} - 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;
- Remove the following line:
- Click on the Save Template button
- 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
- Follow Steps 1 to 4 as per removing the image border from Blogger posts.
- 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;
toborder: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
- Change the following line:
- Click the Save Template button to save your changes
- 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:
eg
<img src="http://3.bp.blogspot.com/_vLeiVavkV_M/SrRp2wb1I_I/AAAAAAAAAAA/XXXXXXXXX/s200/download-now.png" border="0" 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
- How To Add Borders To A Blogger Footer Blogspot
In this Blogger tutorial I expand on my previous article about how to add a 3-4 column footer to Blogger by showing you how add border styling to the new footer. You will learn how to add a border around all of your footer columns or around only part...
- Remove Image Border In Default Blogger Templates Simple And Awesome Inc
In this Blogger tutorial I show you how to remove the border around images in Blogger posts (Blogspot posts) when using one of the latest default Blogger templates Simple or Awesome Inc. If you are using an older generation Blogger template or a custom...
- Add Css Styling To Blockquotes In A Blogger Template
Today I continue the series of Blogger tutorials (Blogspot tutorials) by showing you how to apply CSS styling to blockquotes in a Blogger template. Other articles I have already published on the subject of CSS styling include: How to Add, Delete or Remove...
- Add A Post Divider Between Blogger Posts
In today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most...
- How To Align And Justify Blogger Posts
This is the second article in a series about CSS styling tricks and tips for Blogger written with Blogger beginners and novices in mind but suitable for all bloggers who want to customize their existing Blogger template. While the first article dealt...