Remove Border Around Pictures in Blogger

When newbie blogger start their blog, they don't care too much about their blog design and look like images uploaded in the blog posts comes with a default border and shadow around it which looks very nasty. But as they start learning blogging they feel that they should remove the border around the images to make blog posts more attractive and professional. In one of my previous published posts I have discussed  Tips to optimize images for SEO to gain traffic from search engines and today we will discuss about how to remove border and shadow around the images in blogger. So, let start the tutorial.

Remove Border from Image in Single Post

If you want to get rid from the borders and shadow only from a particular image uploaded in the post then follow below steps.

1. Upload image in your post.
2. Now choose HTML from top left corner.



3. Now locate to the image HTML code which will something look like this:



<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-i1H6KbmWEFb8L1paEvJKhU34BlVGSi7aVcOalnLIG_RmfRW9MSV_b7_LJtJng8aRsO8BiF-hdxsuV6l_OicTSzHCX5Cneb318nieHE_s63bmpvms8XqejNsShtdDMqTRXHGmj_TGdCA/s1600/Remove-Border.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-i1H6KbmWEFb8L1paEvJKhU34BlVGSi7aVcOalnLIG_RmfRW9MSV_b7_LJtJng8aRsO8BiF-hdxsuV6l_OicTSzHCX5Cneb318nieHE_s63bmpvms8XqejNsShtdDMqTRXHGmj_TGdCA/s320/Remove-Border.jpg" /></a>



4. Now to remove the border simply add a little piece of CSS code style="border-style:none;" into the <img> tag as shown below.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-i1H6KbmWEFb8L1paEvJKhU34BlVGSi7aVcOalnLIG_RmfRW9MSV_b7_LJtJng8aRsO8BiF-hdxsuV6l_OicTSzHCX5Cneb318nieHE_s63bmpvms8XqejNsShtdDMqTRXHGmj_TGdCA/s1600/Remove-Border.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border-style:none;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-i1H6KbmWEFb8L1paEvJKhU34BlVGSi7aVcOalnLIG_RmfRW9MSV_b7_LJtJng8aRsO8BiF-hdxsuV6l_OicTSzHCX5Cneb318nieHE_s63bmpvms8XqejNsShtdDMqTRXHGmj_TGdCA/s320/Remove-Border.jpg" /></a>

It's all done!

Remove Border and Shadow From All Images

Using this method will remove border from all of your blog posts images and even it will also not appear in your future posts.

1. Go to Blogger >> Template.
2. First backup your blog template.
3. Click Edit HTML.
4. Now search below similar code in your template.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
 padding: $(image.border.small.size);

 background: $(image.background.color);
 border: 1px solid $(image.border.color);

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



5. Replace the entire piece of code with the code given below.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}



6. Click on Save Template button.
7. You are done!

Remove Border from Dynamic Views Templates

If you are using blogger Dynamic Views template for your blog, then the above code will not work for you. To remove border from dynamic views template follow below steps.

1. Go to Blogger >> Template >> Edit HTML.
2. Press Ctrl+F and search for



]]></b:skin>



3. Now paste below code just above it.



.entry-content img{
box-shadow: none !important;
padding: 0px !important;
border: 0px !important;
}



4. Click on Save Template button.

That's it.