Thursday, October 29, 2009

Updated post editor: remove image border




First thing to note is that with the Blogger updated post editor, you can only upload pictures in the compose mode. To remove border from uploaded photo, you will need to edit the HTML used to display the photo and that you can only do in the Edit HTML mode where in place of the photo, you will see this script:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s320/kimchi.jpg" /></a>
</div>
Now one would think that the attribute border="0" would ensure that the displayed picture would not have a border, but it does, as you can see in that photo of kimchi (Korean version of sauerkraut or fermented cabbage) above.

In order to make the border disappear you can add this attribute style="border:none;" to the <img> tag like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" border="0" src="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s320/kimchi.jpg" /></a>
</div>

and the result of that edit is this photo minus the border:




Update: As a result of test removing border from images uploaded via Blogger I have found out that the attribute style="border:none;" must be placed before src="photo URL" and not after.

Update 2: "Hi Peter, How about adding an image border? Simply changing border="0" to border="5" or "10" and making sure my colors were correct didn't cut it. Please help."

My response: Since Blogger add border to images as a default, I suppose one does not need to do anything to have border with images and to prove that, I uploaded 2 photos, first with the updated post editor, then with the old post editor, both without editing the codes. As you can see below, both are framed with a border:





Related posts:
Related posts:
Images and the Blogger updated post editor
New Blogger updated post editor - Birthday gift?
Posted by at
Labels: , ,

73 comments:

  1. thanks for your tips,and I have page to edit posting form,look at my blog service colomn.

    ReplyDelete

  2. "I have page to edit posting form,look at my blog service colomn."

    Sorry don't understand. Boleh terangkan dalam Bahasa Indonesia.

    ReplyDelete

  3. maaf bahasa inggris saya kacau,maksud saya : saya punya halaman untuk mengedit postingan/artikel/gambar, coba lihat ini:juffan.com/makeppcadsform/posting.html mungkin ini berlebihan, tapi kamu bisa lihat kode html untuk dipelajari.

    ReplyDelete
  4. Anonymous11/05/2009

    I want to thank you peter for making it so easy to get the 4 panel template I've wanted. everywhere I turned, I became frustrated and confused, until I met you. I made this http://johnzworld1.blogspot.com/2009/11/thank-you-peter-chen.html
    Thanx again :)

    ReplyDelete

  5. Hi John,

    Thanks for the write-up and link at Thank you Peter Chen

    ReplyDelete

  6. Thanks for the wonderful tips.

    I was just wondering, how did you make a direct link for your post on the blogger template?
    e.g http://www.bloggertipsandtricks.com/2009/10/remove-image-border-updated-post-editor.html#links

    Could you maybe make a blog post about it?

    Thanks.

    ReplyDelete

  9. hi uncle peter, (hope u don't mind me calling u uncle) i'm having a problem with my header image. u see, i need to change my header image to another image. The location of the image is here :

    http://4.bp.blogspot.com/_iI6SgnnhWEM/SsM-YTiVDjI/AAAAAAAAANQ/ijq1Q8wfG_Q/s1600/tab_background.gif

    So, how do i go about changing the header image. The template i'm using is a free template and the image is on the top right hand side of my site.

    BTW, what is "http://4.bp.blogspot.com"?

    Thanking u in advance.

    My site is here http://loseweightin14days.blogspot.com/

    ReplyDelete

  10. The new xml Blogger template which uses LAYOUT has made it very easy. Sign into Dashboard, click LAYOUT then in the HEADER section, click EDIT and you will be presented with a form to add the image URL plus a couple of choices. If this did not help, ask again.

    ReplyDelete

  11. thanx uncle peter, for your speedy reply. appreciate it, thanx a lot

    u have a very informative and great blog.

    thanx again

    ReplyDelete

  12. Thanks for your tips, from Greece, Peter! I realy loved your site!

    ReplyDelete

  13. HI Peter

    Ive tried a few times when attempting to comply with affiliate verification programs to add a metatag.

    They suggest to put the meta tag between the opening head tag and the closing head tag of the HTML.

    Is this the same for blogger?

    I just dont seem to be able to do it right. Any suggestions?

    Regards

    Desmond

    http://omega-constellation-collectors.blogspot.com/

    ReplyDelete

  14. Just add the meta tag immediately after <head>

    ReplyDelete

  15. Peter, Thank you so much for the work you do here! I just used a post of yours from '07 to perfect my template and it was the only suggestion that actually worked!!! From now on, I will be sure to check your site first when I have a blogger question :)

    ReplyDelete

  16. Many thanks I'll give it a try

    ReplyDelete
  17. Anonymous12/07/2009

    thank you for the tips

    ReplyDelete

  18. Hi Peter,

    I have been here before but I came back today because I am quite distraught in getting foreign comments from the east which is pornographic in content. They usually post on one specific post and obviously I have deleted the comments. As of today I have moderated all comments. Just one question, will this help stop the spam, very upset about this. Thanks again for all the help,I will return.

    Regards,
    Annabelle

    ReplyDelete

  19. With respect to spam comments, I can only refer you to No captcha for comments? and relate my own experiences with spam comments. In general, ever since Blogger as well as all other blogging platforms enforced the nofollow attribute for all links in comments, the amount of spam comments I received has dropped drastically so much so I did away with the word verification (I still maintained comment moderation).

    There was an exception when I received so many spam comments which are easily identifiable by lots of Chinese/Japanese characters that I stopped clicking on the reject link, simply
    let the comments accumalate, then reject the comments via the Dashboard. Now I am no longer troubled by those spam comments and I still do not require word verification for comments.

    ReplyDelete

  20. Great blog, and thank you for helping us. QUESTION: How do I embed or link to a PDF file (that I created and sits on my HD)?

    ReplyDelete

  22. You are a genius, and a generous one. Thank you sooooo much for your speedy reply on embedding a PDF file!

    I thank you, also, for your sanity-saving information on BLOCKING spam using the Comments Moderator. It has already spared me from garbage strewn over my blog posts.

    ReplyDelete

  23. Just wanted to thank you for your excellent tips - was on another post but didn't see comments...so here I am. Anyhoo, saved the day with your 'how to change the timestamp' on my blog - thank you!!

    ReplyDelete

  24. I have been trying to figure this out for a long time and never could, so THANK YOU! You are the best!

    ReplyDelete

  25. Direct hit. Exactly what I needed. Remove the border from one pic not all. Perfect. Thanks.

    ReplyDelete

  26. Hi Peter, thank you very much. You made it work!

    ReplyDelete

  27. Thanks for this tip. Your post really helped me out! Keep on posting and laughing! Best regards,

    ReplyDelete

  28. Tq100x! Gawd.. i oredi started to redo d layout again n luking for another new layout WITHOUT d frame. But d tip dt u jz taught here helps me a lot!!!! It works!

    ReplyDelete

  29. Very helpful! Thought I'd have to remove the border styles for the entire blog, so glad it can be done for individual posts. Thanks!

    ReplyDelete

  30. Thanks so much for posting this--exactly what I was looking for!

    ReplyDelete

  31. Thank you so much Peter! I was able to remove the borders I wanted.

    Is there a way to do this across my whole blog (blogger) without having to go through each photos?

    ReplyDelete

  32. Thanks, your blog is quite handy

    ReplyDelete

  33. aaah!! this is genius! just like many of your tricks... thank you

    ReplyDelete

  34. Thanks so much -- your posts are like a beacon in the darkness!
    Fangs, Wands and Fairy Dust
    steph@fangswandsandfairydust.com

    ReplyDelete

  35. Thanks, but why doesn't it work for this photo?
    http://raymondvanhouten.blogspot.com/2010/06/looks-like-sunset-at-cloudy.html

    ReplyDelete

  36. Your image had been uploaded with the old post editor but it looks like the instruction are the same.

    Tested at test removing image border but looks like border still there. Looks like something changed.

    ReplyDelete

  37. thank you for the very quick reply. Does this mean that removing the border with inserting style="border:none;"
    doesn't work for the old post editor

    ReplyDelete

  38. Look at test removing border from images again and see some surprising results. Will try to find out later.

    Tot straks meneer.

    ReplyDelete

  39. So far I am afraid not to have seen 'surprising results', and that is a bit of a surprise. But I will wait a bit.
    Can you maybe once put your light on how to add a border to a photo; just a narrow thin border touching the photo, so no space in between the photo and border.
    It is very interesting to go through your blog. Never expected to be into HTML, but now I am.Thansk for that
    regard
    Raymond

    ReplyDelete

  40. The 'surprising thing' from test removing image border is that in all the 3 photos displayed, they all have style="border:none;" and border="0" but the first one have a border but the bottom 2 from previous posts have none.

    ReplyDelete

  41. OK Meneer Raymond, I have solved the riddle. I put the border:none in the beginning before the src="" and now you will see the codes I took from your blog and reposted over at test removing border from image no longer have a border.

    ReplyDelete

  42. Peter thanks so much; now I start to miss the border already ;-)

    ReplyDelete
  43. Anonymous7/01/2010

    so ive used both the old and new editor and did what you said with both and still i cannot remove the white border. style="border:none;" border="0" when placed doesn't work and removing border="0" does nothing. what am i doing wrong?

    ReplyDelete

  44. 4th Floor, if you read the above, you will know that others have mentioned the problem. I did a test at Test removing image border and found that
    must be place immediately after img. Try that and see if that caused your problem. Alternatively send me you codes to contact me

    ReplyDelete

  45. Thanks for the kimchi.

    ReplyDelete

  46. Hi Peter,

    How about adding an image border? Simply changing border="0" to border="5" or "10" and making sure my colors were correct didn't cut it. Please help.

    Thanks!

    ReplyDelete

  47. This post describe how to remove border (which are already there). Since they are there by default, this mean to get the border, you just upload the photo and do nothing, the border will be there. See update in this post.

    ReplyDelete

  48. Hi Peter, thank God for someone with your dedication to help otheres.
    I tried taking off the border to my pics as you instructed, do I have to save to draft first or click publish, which is what I did after inserting style="border:none;" but the borders are still there..pleae help this newbie, my blog is www.shiokers.blogspot.com
    Thanks so much

    ReplyDelete

  49. Give more details like whether you uploaded your photo with the new updated post editor or the old one and send me the code via contact form

    ReplyDelete
  50. Anonymous11/19/2010

    Nice post,
    I have applied on
    http://service-center-in-ahmedabad.blogspot.com/2010/11/fly-mobile-service-center-in-ahmedabad.html
    --
    Free Blog Submission

    ReplyDelete

  51. Hi, I think I've done it correctly. But still getting a white border on images. I placed the code like you said before the scr and directly after the img tag.
    Could I send you the code?

    ReplyDelete

  52. Sure send me the code for testing via my contact form

    ReplyDelete

  53. along with this, i was wondering how i would be able to put a border on the pictures. i recently changed the whole layout of my blog, and before i had changed it, it had borders around the pictures. i, unlike some, liked the borders. is there a way i could get the borders back?

    ReplyDelete

  54. I just found this tip. I went to look at my HTML and it does not say "border:none" but I do not have borders on my images. I would like them. Please tell me why this may be. Thanks!

    ReplyDelete

  55. Hi,thanks for the tutorial.I've searched for this tutorial long time ago. Now,the border on my blog has gone.
    Thanks a lot!

    ReplyDelete

  56. Hi there, I've tried adding the border:none tag to my html prior to the photo url (copied and pasted just to be sure I was doing it correctly!) but my images are still coming up with a bit of a shadow under them. Is there a way to remove that all together?

    My settings for images are transparent for background and border.

    ReplyDelete

  57. Hello Peter,
    I am in desperate need of your help. I know nothing about HTMl etc..
    I just started my own blog and now here comes all these borders on my post images I don't want. Is there is "simple how to" in order to remove? Thanks.

    ReplyDelete

  58. Fashionista622, there is no automatic way to do it. One of the way is to first upload your photo to an online image host like Photobucket or Flickr and then use HTML to display the photo: <img src="photo URL" width="some number equal to the width of the photo as you want displayed" />

    If this still puzzle you then ask for help again.

    ReplyDelete

  59. the little owl, your template probably have something like this:

    .img-shadow {
    float:right;
    background: url(trans-shadow.png) no-repeat bottom right; /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */
    }

    so what I would suggest would be to create a new test blog using the same template that you are currently using and search for .img-shadow in the template editor and delete that section to the template and let me know if that helps.

    ReplyDelete

  60. gimna klu mengedit foto beranda....pusing tujuh keliling,,,,

    ReplyDelete

  61. THIS IS what im looking for..all the other tutorias are using code to remove ALL image border..not an individual image

    ReplyDelete

  62. NEW TIP! None of these tips worked for me BUT I found that changing the background ... color,style="background-color: #DDEFF9 ...
    right after my image, to match the background solved my problem. Hope this helps someone else headache go away.

    ReplyDelete

  63. this does not seem to work for me at all!! help!

    ReplyDelete

  65. :( I still can't get it to work on mine. It's so frustrating.

    ReplyDelete

  66. :( please help, I really can't get this to work.
    I created a "test post" where I had just an image so as not to confuse things and it still doesn't work. I did everything it said to do, exactly the same way. Sorry about the double post.

    ReplyDelete

  67. I placed the ( style="border:none;" ) before the (border="0")

    Thank you! it worked out great!

    ReplyDelete

  68. Thanks, at last I found instructions that worked for me. My blog looks so much better with the constraints of borders removed.

    ReplyDelete

  69. Thanks for this tip, first time I have put in something that actually worked.

    ReplyDelete

  71. i have one problem in my website im creating map draw track its having 2maps one is map and another is marker its have a border and how i remove the border? please tell as soon as possible

    ReplyDelete

  72. please help me that is what have ans

    ReplyDelete

  73. how to remove border in my website its have also shadow and black border how to resolve this problem please reply to as soon as possible

    ReplyDelete

Subscribe to: Post Comments (Atom)

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics