Remove Image Border
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 6 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. compose html
  4. Now locate to the image HTML code which will something look like this:

  5. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhhJxmRG6Fpo3_BzRAh4GzplTMgia2EqREQY2c8CTp12tlTMraKeKb_t_Uoh4-f9mHnsQAj_47dhf-NdUGyHID_-yMOQHZn7DL01dHLKH9c-404NXepfiXF1p25Z8-hP3Dgker0G8a_Do/s1600/Remove-Border.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhhJxmRG6Fpo3_BzRAh4GzplTMgia2EqREQY2c8CTp12tlTMraKeKb_t_Uoh4-f9mHnsQAj_47dhf-NdUGyHID_-yMOQHZn7DL01dHLKH9c-404NXepfiXF1p25Z8-hP3Dgker0G8a_Do/s320/Remove-Border.jpg" /></a>

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

  7. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhhJxmRG6Fpo3_BzRAh4GzplTMgia2EqREQY2c8CTp12tlTMraKeKb_t_Uoh4-f9mHnsQAj_47dhf-NdUGyHID_-yMOQHZn7DL01dHLKH9c-404NXepfiXF1p25Z8-hP3Dgker0G8a_Do/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/AVvXsEjnhhJxmRG6Fpo3_BzRAh4GzplTMgia2EqREQY2c8CTp12tlTMraKeKb_t_Uoh4-f9mHnsQAj_47dhf-NdUGyHID_-yMOQHZn7DL01dHLKH9c-404NXepfiXF1p25Z8-hP3Dgker0G8a_Do/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.


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

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


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

  8. Click on Save Template button.
  9. 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

  3. ]]></b:skin>

  4. Now paste below code just above it.

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

  6. Click on Save Template button.
That's it.

2 comments:

  1. Yay it worked!!!! Tried a few others but this was the only one that worked :) THANK YOU :) X

    ReplyDelete
  2. could not find any of this is my html.

    ReplyDelete

 
chsaqlain © 2013. All Rights Reserved. Powered by Blogger
Top