How to Remove Border And Shadows From Images In Blogger

Most of the default Blogger templates display a white border and box shadow frame around every post image. Many of blogger are having a problem in removing shadow and border from a image. There are two ways to accomplish this depending on whether you want to completely remove the effects on every image or just on specific images.

DEMO


How To Remove Border And Shadows From Images In Blogger


Method 1


If you want to remove the borders from all of the images on your blog

  • Go to Blogger Dashboard 
  • Click on DropDown Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML --> Proceed --> Expand Widget Templates
  • Press Ctrl + F and search the code shown below

]]></b:skin>

  • Now replace it with the code shown below

.post-body img, .post-body .tr-caption-container, .Profile img,
.Image img, .BlogList .item-thumbnail img {
    border: 0px;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    border-radius: 0px 0px 0px 0px;
    background: none;
}
]]></b:skin>

  • Now save your template

Method 2


If you want to remove the borders from specific images

  • Go to Blogger Dashboard 
  • Click on DropDown Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML --> Proceed --> Expand Widget Templates
  • Press Ctrl + F and search the code shown below

]]></b:skin>

  • Now replace it with the code shown below

img.noborder {
    border: 0px;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    border-radius: 0px 0px 0px 0px;
    background: none;
}
]]></b:skin>

  • Now save your template
  • When you post an image use the following HTML code

<img class="noborder" src="Your image Url">

Like it? Share it.

1 comment

Reply
Anonymous
19 August 2012 at 09:57

This is amazing! It works! Thank you!

Click to Add a New Comment

  • If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
  • Do NOT add links to the body of your comment as they will not be published.
  • Only the comments posted in ENGLISH will be approved.
  • If you have a problem check first the comments , maybe you will find the solution there.

Subscribe to: Post Comments ( Atom )