Saturday, May 18, 2013

How to Remove Border Around Images in Blogger

Author: Gagan Masoun
How to Remove Border Around Images in Blogger
Blogger/Blogspot is a best blogging platform for newbies. They use image in their blog posts to give more professional look to content. But, some times your blog posts comes with a default border and shadow around images which looks very ugly. You can remove this border easily by make changes in template CSS code.

Today, in this article I am going to share how to remove border and shadow around the images in blogger/blogspot blogs. So, let start the tutorial. 

Remove Border/Shadow:

  • Go to Blogger >> Template.
  • First Backup Your Blog Template.
  • Click Edit HTML.
  • Now search below similar code in your template.
.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);
  • Replace the above code with given below code.
.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;
  • Click on Save Template button.
Congratulations: The Border around images in Blogger successfully removed. Visit your site and confirm that the images are showing border or not.

Remove Border From Dynamic Views Templates

  • Go to Blogger >> Template >> Edit HTML.
  • Press Ctrl+F and Search For ]]></b:skin>
  • Now paste below code just above it.
.entry-content img{
box-shadow: none !important;
padding: 0px !important;
border: 0px !important;
  • Click on Save Template button, It's all done :)

I hope the above tutorial useful for you to remove border and shadow around images in blogger posts. If you have any query then ask via comment below. Happy Blogging!

Author - is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddyYou can also follow him on Google+.


Post a Comment