Sunday, May 26, 2013

How to Remove Borders from Blogger Image?


Image with and Without Borders


Look at the two images above. Both of them are almost same. Except the second one has borders outside. The first one is transparent and it has no shadow or border. And the second one is transparent but there is a boudary outside of it. Which one do you like?  

If you are a regular visitor of Marks PC Solution, then you should notice our images has no borders. In fact no borders at present, previously out images has borders. Most of the time I like to use transparent image with PNG extension. And outside of each image, there was a border which looks very odd. But adding a CSS code removes this problem. 


Few days ago, one of my acquintances shared a code with me. He said this code removes the outside border of the uploaded images in blogger blog. I applied this code in Marks PC Solution. And magically there is no borders outside of my images. All images are now fully transparent! 


By default, blogger blogs automatically add borders and shadows outside of your uploaded images. In case of non-transparent images (maybe PNG, JPEG, GIF) it doesn't matter. But when you upload a transparent image with PNG format the borders look really odd. It affects the transparency of the image. Though blogger template designer allows you to change the shadows and borders of the images. But you can't fully remove the borders. 

Today I will show how can you fully get rid of your blogger images from borders. 


Well, this is not a tough job at all. All you need is just to add a CSS code in your blogger template. Then you will be able to see this magic. Okay let's start. 
  1. Make sure you're signed in to your blogger account.
  2. Go to the Admin Panel/ Design/ Dashboard or whatever you call it. 
  3. Click on the Template button from the left pane.
  4. Now hit on the Customize option.
  5. At the left side you get a list. Select Advance from here. 
  6. Now another list will appear. Drop down and choose Add CSS from that list. You can also take help of the image below.  
  7. Now a box named Add Custom CSS will appear at the right side. 
  8. Copy and paste the CSS code below in the Add Custom CSS box. 
  9. You're almost done! Now hit on the Apply to Blog button from the top right corner. 
  10. Done! Visit your blog and see the magic! 

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

There are 10 steps to do this task. Doesn't this process look very long? Okay I'm gonna shorten this! Just follow the simple way below: 

Template > Customize > Advance > Add CSS > Add Custom CSS Box (Copy and Paste the above code here) > Apply to Blog. 



How to Add Custom CSS in Blogger Template
Add Custom CSS Option in Blogger Blog

Stay with Marks PC Solution to get more interesting IT topics!


23 comments:

  1. Replies
    1. Thanks for the comment but sounds like a spam. Please make sure your comment is relevant.

      Delete
  2. Thank you so much for the info! That border annoyed me so much!

    ReplyDelete
    Replies
    1. If you continue visiting this site, I promise you will get solution to many other annoying problems! :)

      Stay in touch.

      Delete
  3. Thanks for help!

    ReplyDelete
  4. Excellent, thanks so much for doing this Abdur.
    Can you tell me how to do this for 1 picture only?. On my blog, I actually like the thin border, I have a black background template and most of my images are on the moody/dark side, so the thin red pic border actually looks good, but I wanted to put in a paragraph separator and make it look like a floating design, with the border on it, it doesn't.

    Thanks in advance

    Murph.
    www.wherethehellismurph.com

    PS, I'd be interested in seeing how muc you would charge for a re-design of my blog, I do my best, but it ain't easy :-)

    ReplyDelete
    Replies
    1. What a dangerous look of your site is! ;)

      Plz change the background first. Black gives pain to the visitors' eyes. Actually I'm not a web designer. So can't give any solution right now. Sorry . . .

      Delete
  5. Works!!! And as easy as a 1,2,3!!

    Thnks!!

    ReplyDelete
  6. This code doesn't work on my blog :( Any help would be appreciated

    ReplyDelete
    Replies
    1. If you're using Blogger's own templates then I would like to say- try again following all steps properly.

      If you're using any third party template, then this code might not work properly. First make sure you're not missing something. Thanks for contacting us . . .

      Delete
  7. So how do you do this for a single image in a post?

    ReplyDelete
    Replies
    1. I don't have such code but if you use this one, it will affect all images - new and old - of your site. Thanks for being with Marks PC . . .

      Delete
  8. Hey there! I used the code in my CSS box but it doesn't seem to work.

    ReplyDelete
    Replies
    1. Okay let me check your site. Share your URL . . .

      Delete
  9. Replies
    1. Try again and follow the steps properly. And share your site plz . . .

      Delete
  10. Hi, It is not working in my blog pcprank.blogspot.com

    ReplyDelete