Default Image

Months format

Show More Text

Load More

Related Posts Widget

Article Navigation

Contact Us Form

How to Remove Blogger Image Border and Shadow With Video Tutorial


How to Remove Blogger Image Border and Shadow With Video Tutorial



How to Remove Blogger Image Border and Shadow With Video Tutorial
 A quick and easy tutorial to remove shadows and borders from your blog that are found on some of blogger’s themes or templates. The shadow can be great effect when used sparely, but in blogger theme or templates it can seem a little overdone. This post will show you to remove the shadow from your blog posts, images and headers/shadow. I Hope you find it useful Tutorial If you want to get rid of those annoying shadows and borders around blogger images, then follow my tutorial (see the difference in the screenshot Above):

Remove Blogger Image Border and Shadow Follow


If you are using old Blogger interface:

Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enters after the last character of the last line } - Apply to Blog.


How to Remove Blogger Image Border and Shadow With Video Tutorial
Remove Blogger Image Border

If you are using new Blogger interface:

Go to Dashboard - Template - Customize - Advanced - Add CSS - paste the following code - Press enters after the last character of the last line } - Apply to Blog.

How to Remove Blogger Image Border and Shadow With Video Tutorial
Remove Blogger Image Border


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

Now your blogger images should appear without any border/shadow. Cheers!
Update:

If the above method does not work, follow these steps:

- Go to Blogger's Dashboard > Template > Edit HTML
- Click anywhere on the HTML code area and search by pressing the CTRL + F keys for the following code:

How to Remove Blogger Image Border and Shadow With Video Tutorial
Remove Blogger Image Border

   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);
Note: if you can't find the entire code, then try to find this line and the rest of it should appear:

 -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
- Delete it and Save your template.

Removing Border with Video Tutorial in Urdu and Hindi



 

1 comment

  1. I finally remove Image border and shadow! Thank you so much :)

    ReplyDelete

About Author

My Name is Naeem Shafiq. I am a Blogger, YouTuber, and Graphic Designer, I Am an AutoCAD Expert, and My Experience is 5 Years of AutoCAD.