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?
47 comments:
thanks for your tips,and I have page to edit posting form,look at my blog service colomn.
"I have page to edit posting form,look at my blog service colomn."
Sorry 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.
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 :)
Hi John,
Thanks for the write-up and link at Thank you Peter Chen
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.
Not sure what you want but perhaps it is active clickable hyperlink?
Not sure what you want but perhaps it is active clickable hyperlink?
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/
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.
thanx uncle peter, for your speedy reply. appreciate it, thanx a lot
u have a very informative and great blog.
thanx again
Thanks for your tips, from Greece, Peter! I realy loved your site!
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/
Just add the meta tag immediately after <head>
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 :)
Many thanks I'll give it a try
thank you for the tips
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
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.
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)?
Tamar sorry for this late response. Refer to Embed pdf file into post and Testing embedding pdf file
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.
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!!
I have been trying to figure this out for a long time and never could, so THANK YOU! You are the best!
Direct hit. Exactly what I needed. Remove the border from one pic not all. Perfect. Thanks.
Hi Peter, thank you very much. You made it work!
Thanks for this tip. Your post really helped me out! Keep on posting and laughing! Best regards,
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!
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!
Thanks so much for posting this--exactly what I was looking for!
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?
Thanks, your blog is quite handy
aaah!! this is genius! just like many of your tricks... thank you
Thanks so much -- your posts are like a beacon in the darkness!
Fangs, Wands and Fairy Dust
steph@fangswandsandfairydust.com
Thanks, but why doesn't it work for this photo?
http://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.
Tested 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;"
doesn'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.
Tot 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.
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
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.
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.
Peter thanks so much; now I start to miss the border already ;-)
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?
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
Thanks for the kimchi.
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!
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.
Post a Comment