How To Remove Border And Shadow Around Images On Blogger

9 comments
By default blogger shows border and shadow around images or photos of your blog post if you find this annoying and want to remove or delete it just follow the given tutorial with images :



how to remove border and shadow from blogger images main
how to remove border and shadow from blogger images

Steps : To remove border from blogger images


Step 1. Log in to your Blogger account, then go to Template > Edit HTML.


edit blogger template


Step 2. Click anywhere inside the code and search for following code ( CTRL+F ) :

]]></b:skin>

Step 3. Copy and paste the following code just above it :

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
  padding: 0px !important;
  background: none !important;
  border: 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 4. Save the Template.

That's it !

Now visitors of your blog will not see any border and shadow around your blog images. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

9 comments:

  1. That doesn't work anymore. New solution, please :)

    ReplyDelete
    Replies
    1. Hi Mark
      Everything is fine from my end. Are you using custom Template? May be your template CSS are overriding the provided values.

      Delete
  2. Fan_tas_tic, it actually worked for me. I don't know what Mark's doing. I assumed I needed to put it on a new line and so added one at 580. Maybe he tagged it on to the bracket and it made a difference?

    ReplyDelete
    Replies
    1. Hi Don
      Actually, New Line doesn't matter too much in coding, but it is necessary to add code to the right place because a single piece of misplaced code can affect your template.

      Suggestion: Always backup your template before making any changes so that you can easily revert back if something wrong happens.

      Delete
  3. Thanks for this handy tip. I entered the code in the Custom CSS box (in the advanced section of the template customiser and it worked fine.

    ReplyDelete
    Replies
    1. Hi SWJ
      I am happy to hear that, this trick worked for you.
      Yes, You can also add the given CSS in Custom CSS box of Template Customiser.
      I will update my posts :)

      Delete
  4. Can you make a tutorial on how to remove shadow from a particular image?
    I tried it by putting style="border:none;", still I the shadow not just leaving.

    ReplyDelete
    Replies
    1. Hi Durbar Ghosh

      Yes, I am definitely going to create a tutorial on this topic :)
      Setting border style to none is not going to work because the shadow around images is not due to border its actually due to "Shadow code" so, instead of setting border:none; add box-shadow: 0px 0px 0px transparent !important; to that particular image.

      I hope this will help you.
      Happy blogging.

      Delete
    2. After a lot of search I found that code in W3schools CSS section. Yet, thanks a lot for the reply. Your articles always have been helpful, keep it up.

      Delete

Every comment is appreciated but keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!

Request Post