How to Remove Blogger Picture/Image Shadow and Border

When new blogger start their blog, they don't care about their blog design and look like images uploaded in the blog posts comes with a default border and shadow around it which not looks very good. 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 this article, you will learn to remove border and shadow around the images.


Read : How to add facebook like button in blogger


Remove border and shadow from all images


Step 1. Go to Blogger > Template.

Step 2. Backup your blog template.

Step 3. Click on Customize > Advance > Add CSS.

Step 4. Paste the below code in the CSS window and press enter after the last character of the last line.


 .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !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;
}


Step 5. Click on Apply to Blog.

Now your blogger images should appear without border or shadow. If the above method doesn't work for you, you can try this method.



Step 1. Go to Blogger Dashboard > Template.

Step 2. Click on Edit HTML.

Step 3. Click anywhere on the code area and search by pressing Ctrl+F keys for the below code.


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

Also Read : Format hard disk using notepad

Step 4. Replace the above 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;
}



Step 5. Click on Save Template button.

You are done.


If this method doesn't work, you can try this method.


Step 1. Go to Blogger Dashboard > Template.

Step 2. Click on Edit HTML.

Step 3. Click anywhere on the code area and search by pressing Ctrl+F keys for the below code.

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



If you can't find the above code, then try to find the 
below line of code.


-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);


Delete this line and save your template.

Remove border from dynamic views templates

If you are using blogger Dynamic Views template for your

blog then try this method. To remove border from dynamic

views template follow below steps.

Step 1. Go to Blogger Dashboard > Template.

Step 2. Click on Edit HTML.

Step 3. Click anywhere on the code area and search by pressing Ctrl+F keys for the below code.

    "     ]]>


Step 4. Now paste below code just above it.


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


Step 5. Click on Save Template button.


You are done.


Following the above methods you can remove border from your blog images.