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.<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>
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>
<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:
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?
thanks for your tips,and I have page to edit posting form,look at my blog service colomn.
ReplyDelete"I have page to edit posting form,look at my blog service colomn."
ReplyDeleteSorry don't understand. Boleh terangkan dalam Bahasa Indonesia.
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.
ReplyDeleteI 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
ReplyDeleteThanx again :)
Hi John,
ReplyDeleteThanks for the write-up and link at Thank you Peter Chen
Thanks for the wonderful tips.
ReplyDeleteI 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.
Not sure what you want but perhaps it is active clickable hyperlink?
ReplyDeleteNot sure what you want but perhaps it is active clickable hyperlink?
ReplyDeletehi 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 :
ReplyDeletehttp://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/
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.
ReplyDeletethanx uncle peter, for your speedy reply. appreciate it, thanx a lot
ReplyDeleteu have a very informative and great blog.
thanx again
Thanks for your tips, from Greece, Peter! I realy loved your site!
ReplyDeleteHI Peter
ReplyDeleteIve 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/
Just add the meta tag immediately after <head>
ReplyDeletePeter, 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 :)
ReplyDeleteMany thanks I'll give it a try
ReplyDeletethank you for the tips
ReplyDeleteHi Peter,
ReplyDeleteI 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
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).
ReplyDeleteThere 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.
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)?
ReplyDeleteTamar sorry for this late response. Refer to Embed pdf file into post and Testing embedding pdf file
ReplyDeleteYou are a genius, and a generous one. Thank you sooooo much for your speedy reply on embedding a PDF file!
ReplyDeleteI 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.
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!!
ReplyDeleteI have been trying to figure this out for a long time and never could, so THANK YOU! You are the best!
ReplyDeleteDirect hit. Exactly what I needed. Remove the border from one pic not all. Perfect. Thanks.
ReplyDeleteHi Peter, thank you very much. You made it work!
ReplyDeleteThanks for this tip. Your post really helped me out! Keep on posting and laughing! Best regards,
ReplyDeleteTq100x! 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!
ReplyDeleteVery helpful! Thought I'd have to remove the border styles for the entire blog, so glad it can be done for individual posts. Thanks!
ReplyDeleteThanks so much for posting this--exactly what I was looking for!
ReplyDeleteThank you so much Peter! I was able to remove the borders I wanted.
ReplyDeleteIs there a way to do this across my whole blog (blogger) without having to go through each photos?
Thanks, your blog is quite handy
ReplyDeleteaaah!! this is genius! just like many of your tricks... thank you
ReplyDeleteThanks so much -- your posts are like a beacon in the darkness!
ReplyDeleteFangs, Wands and Fairy Dust
steph@fangswandsandfairydust.com
Thanks, but why doesn't it work for this photo?
ReplyDeletehttp://raymondvanhouten.blogspot.com/2010/06/looks-like-sunset-at-cloudy.html
Your image had been uploaded with the old post editor but it looks like the instruction are the same.
ReplyDeleteTested at test removing image border but looks like border still there. Looks like something changed.
thank you for the very quick reply. Does this mean that removing the border with inserting style="border:none;"
ReplyDeletedoesn't work for the old post editor
Look at test removing border from images again and see some surprising results. Will try to find out later.
ReplyDeleteTot straks meneer.
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.
ReplyDeleteCan 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
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.
ReplyDeleteOK 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.
ReplyDeletePeter thanks so much; now I start to miss the border already ;-)
ReplyDeleteso 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?
ReplyDelete4th 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
ReplyDeletemust be place immediately after img. Try that and see if that caused your problem. Alternatively send me you codes to contact me
Thanks for the kimchi.
ReplyDeleteHi Peter,
ReplyDeleteHow 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!
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.
ReplyDeleteHi Peter, thank God for someone with your dedication to help otheres.
ReplyDeleteI 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
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
ReplyDeleteNice post,
ReplyDeleteI have applied on
http://service-center-in-ahmedabad.blogspot.com/2010/11/fly-mobile-service-center-in-ahmedabad.html
--
Free Blog Submission
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.
ReplyDeleteCould I send you the code?
Sure send me the code for testing via my contact form
ReplyDeletealong 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?
ReplyDeleteI 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!
ReplyDeleteHi,thanks for the tutorial.I've searched for this tutorial long time ago. Now,the border on my blog has gone.
ReplyDeleteThanks a lot!
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?
ReplyDeleteMy settings for images are transparent for background and border.
Hello Peter,
ReplyDeleteI 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.
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" />
ReplyDeleteIf this still puzzle you then ask for help again.
the little owl, your template probably have something like this:
ReplyDelete.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.
gimna klu mengedit foto beranda....pusing tujuh keliling,,,,
ReplyDeleteTHIS IS what im looking for..all the other tutorias are using code to remove ALL image border..not an individual image
ReplyDeleteNEW TIP! None of these tips worked for me BUT I found that changing the background ... color,style="background-color: #DDEFF9 ...
ReplyDeleteright after my image, to match the background solved my problem. Hope this helps someone else headache go away.
this does not seem to work for me at all!! help!
ReplyDeleteTHANKS
ReplyDelete:( I still can't get it to work on mine. It's so frustrating.
ReplyDelete:( please help, I really can't get this to work.
ReplyDeleteI 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.
I placed the ( style="border:none;" ) before the (border="0")
ReplyDeleteThank you! it worked out great!
Thanks, at last I found instructions that worked for me. My blog looks so much better with the constraints of borders removed.
ReplyDeleteThanks for this tip, first time I have put in something that actually worked.
ReplyDeleteGlad it worked for you.
ReplyDeletei 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
ReplyDeleteplease help me that is what have ans
ReplyDeletehow 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