SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Saturday, December 12, 2009

How-to remove border around photos in Blogger blog

I'm passionate about framing or adding borders to my digital images, and creating photo collages in Photoshop, something I really enjoy doing!

Thus, when a thin border is automatically set around all photos uploaded in my Blogger posts, I find them awfully unappealing! And, as long as I don't know how to remove them, I've learnt to accept them, though grudgingly. By default, any image uploaded via Blogger's Updated Post Editor will have a border around it as shown in this photo below that was captured from our garden. It seems that the border is to inform readers that the image is a link which I think is unnecessary as almost everyone knows that for a fact :

Screen shot of flower collage, to show the border set around it by default by Blogger

Fortunately, I stumbled upon an article online recently, that showed how it can be easily removed. I've further refined it after doing some research and experiments.

Here's sharing 3 ways on how it can be done - so simple, easy and quick :

(A) Remove a border from A SINGLE uploaded image, via Blogger's Post Editor :
  1. You need to rectify it in the Edit HTML mode even though the photo was uploaded in the Compose mode.
    Go to the related post that you want to edit at Post Editor. Select the Edit HTML mode and locate the HTML that was used to display the image, which will appear something like this block of code below :

    <a href="http://1.bp.blogspot.com/_yue3lWqntTA/SyJ2XcMH1hI/AAAAAAAABas/VM2nGGLRw9M/s1600-h/IMG_0709+flower+collage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_yue3lWqntTA/SyJ2XcMH1hI/AAAAAAAABas/VM2nGGLRw9M/s400/IMG_0709+flower+collage.jpg" /></a>

  2. Then, to remove the border, just add the CSS (Cascading Style Sheet) style attribute, style="border-style:none;" to the <img> tag as shown below in red :

    <a href="http://1.bp.blogspot.com/_yue3lWqntTA/SyJ2XcMH1hI/AAAAAAAABas/VM2nGGLRw9M/s1600-h/IMG_0709+flower+collage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border-style:none;" border="0" src="http://1.bp.blogspot.com/_yue3lWqntTA/SyJ2XcMH1hI/AAAAAAAABas/VM2nGGLRw9M/s400/IMG_0709+flower+collage.jpg" /></a>

    That's all to it!

(B) Remove borders from ALL uploaded images in Blogger blog posts (past and future photos) :

either
(i) via Blogger's Layout | Fonts and Colors :

  1. Go to your blog's Dashboard | Layout | Fonts and Colors

  2. Change the Border Color to be the same as the color of Page Background Color and click the Save Changes tab when done.
    Note: This will make ALL BORDERS invisible, besides those around all the photos. Ignore this method and choose the next method (ii), if you want borders removed only from your uploaded photos and not elsewhere.

    Screen shot of Blogger's Layout feature: Fonts and Colors
or
(ii) via Blogger's Layout | Edit Template :

  1. This will be done by modifying the blog's template very marginally.
    Go to Dashboard | Layout | Edit Template

  2. Scroll down or CTRL F to find the code .post img { and then locate border:1px solid $bordercolor; below it. Change the later to border-style:none;
    Finished...all borders around uploaded images, the past and future, will be removed forever!

    Screen shot of Blogger's Edit Template: to remove border around images
Easier than ABC, right? And, this is how the photo appears, borderless, after changes made above :

Photo collage of flowers in our garden, November 2009

Learning, experimenting and acquiring knowledge...and then sharing them is so wonderful and enjoyable! Such fun and keeps me smiling! :-)

Update: 18 October 2010
If your blog is using Blogger's new Template Designer, then you'd need to add custom CSS to remove border and shadows around your images. Refer to my other tutorial at 'Add CSS in the Template Designer'.

40 comments:

  1. Awesome!! Your directions were easy to follow and best of all CORRECT! Thanks a bunch!

    ReplyDelete
  2. You're most welcome, Fit For Fashion! Thanks a lot for your uplifting feedback...your delight and taking the trouble to pen it here is my reward. :-)

    ReplyDelete
  3. Thanks! Yours is the only post I can find detailing how to remove the border on a single image, not modify the whole style sheet.

    ReplyDelete
  4. My pleasure, Carol! Thanks for your feedback, much appreciated!

    ReplyDelete
  5. wonderful! thank you for the amazing directions! worked perfectly and now I have a signature without a border. yes! :)

    ReplyDelete
  6. Congrats, Shelly! I'm so happy for you! :)

    ReplyDelete
  7. Bliss! I have been searching all afternoon for a way to remove the borders off of pictures- finally a tutorial that works!

    Thank you SO much!

    ReplyDelete
  8. You're most welcome! Thanks for the positive feedback...much appreciated!

    ReplyDelete
  9. just did a google search for this exact topic and your link popped up first! thanks so much! :)

    ReplyDelete
  10. The pleasure is all mine, Rebekah! Great knowing that I've put a smile on your face...thanks for feedback!

    ReplyDelete
  11. THANK YOU! This is the most helpful, step by step help for this question I found! Seriously, thanks so much!

    ReplyDelete
  12. Appreciate your positive feedback, Rachel....thanks!

    ReplyDelete
  13. I dont know what Im doing wrong. I have tried this multiple times writing it different ways and no matter what I do I cannot get rid of my border. Please help!

    ReplyDelete
  14. Hi Nikki,
    It appears that you have to add some custom CSS to your Template Designer. If you scroll upwards to the end of my tutorial, you'll notice that I've included an "Update: 18 October 2010". Please follow the link therein for your solution.
    Hope this helps.

    ReplyDelete
  15. Thank you so much I've been trying to figure this out.

    ReplyDelete
  16. You're most welcome, Connie and thank you for taking the trouble to post your appreciation.

    ReplyDelete
  17. Thank you, thank you!!! This has been bugging me for the longest time! This has been the best tutorial that I've found on this subject! :)

    ReplyDelete
    Replies
    1. My pleasure in sharing, Marcie Jean. Great to know you're happy and found the tutorial helpful.

      Delete
  18. Hi Jacqueline! Thank you very much for this kind tutorial. I have tried several times to remove the border around a single image but it did not work. I am using the awesome ag tenplate, does that have to do something with that?
    Is there any way I could ask you for help, maybe by sending you the HTML-code for the image? Thank you for reading.

    ReplyDelete
  19. Sorry to read that it's not working for you, Bastien. Whatever I've shared in the tutorial are examples that I've tried myself and they worked fine. I'm not good at trouble-shooting HTML code. Instead, you may want to try out another alternative by following the link that I've included at the end of this tutorial under 'Update 18 October 2010'. Hope that other tutorial can sort out your problem.

    ReplyDelete
  20. Hi, thank you for the info. I am just wondering why I couldn't find .post img on my HTML. Is that possible that I do not have that thing? I'd like to put a frame on my profile yet I don't know why I do not have it.

    Lovely blog you have!

    ReplyDelete
    Replies
    1. Thanks for your kind comments, Lamielle! I really don't know why that code is missing.
      I was just wondering that since you'd like a frame on your profile, why don't you create a new profile image with a frame and just replace the existing one.

      Delete
  21. thank you so much for sharing this info! this had been annoying me forever! never again! :)

    ReplyDelete
    Replies
    1. You're most welcome, Skippy haha! Great to know I've put a smile on your face, yeah!

      Delete
  22. Whoo hoo! Borders are G.O.N.E.!
    thank you!!
    Miss Squirrels

    ReplyDelete
    Replies
    1. You're most welcome, Miss Squirrels. Wonderful to know you are happy with the outcome!

      Delete
  23. You are great sir...........Thank you

    ReplyDelete
    Replies
    1. Thanks for the compliment, Irfan Ali.
      Happy blogging, yah!

      Delete
  24. Thanks - great - yes the thing that worked for me was just going into the Customise bit and change the border colour in there - simple !
    there is still some sort of vague shadow thing but hardly noticeable. Thanks as so many blogs had much more complicated solutions.

    ReplyDelete
  25. Thank you very much for this simple technique. I'm not an html,etc savvy but this is very simple compared to the template edit css way. !

    ReplyDelete
    Replies
    1. The pleasure in sharing is all mine, Kelsey!

      Delete
  26. This blog, and your blog about adding a custom CSS, are just brilliant! I'm HTML illiterate, but I had no trouble following your directions. Thank you.

    ReplyDelete
    Replies
    1. Oooh Jane, you've made my day with your lovely comment! Great to know you've found them helpful. :)

      Delete
  27. Thanks for sharing the functions.

    ReplyDelete
    Replies
    1. You're most welcome, Photographer!

      Delete
  28. That's a very helpful post and so well explained.

    ReplyDelete
    Replies
    1. Great to know. Thank you for your generous comments, Tim Watson!

      Delete
  29. Most of the time I don’t make comments on blogs, but I want to mention that this post really forced me to do so. Really nice post! It is extremely helpful for me.
    Personalized Gifts Noida

    ReplyDelete
    Replies
    1. Great to know, renu wpi! Thanks for your kind comments.

      Delete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search