Saturday, September 1, 2007

Uploading And Removing Borders From Picture

It is quite common that we usually upload an image or a diagram or even an illustration of some sort into our post. I usually try to add a picture or two into my post just to add some color into it but there are times when these pictures have some rather weird looking borders surrounding them. In this post I will share with you the simple steps in uploading as well as removing borders from picture, in which you intend to embed onto your Blogger post page. For this example we will use the image uploading tool found in Blogger.

Firstly, once you have logged into your Blogger account, click on this icon and it will generally bring you into your Blogger's post editor page. Once here, you would want to begin the process of uploading a selected image from your PC or even from a particular web page - this is something you should try not to do (taking pictures from other web pages) besides the worry of copyright laws and the simple reasoning that if you post a picture which is taken off from another web page, what's going to happen is that every time you load your blog, that particular picture is going to be loaded by their server, so if their server is down or slow for any given reason, this will ultimately effect your blog as well, besides the owner of that site likely incuring an expense at the same time, thanks to you.

Anyway, assuming you have now decided to upload a particular picture, look for this icon and click on it.

This would immediately open up a new window to help you make the necessary selection of image or images.

Next you would want to decide on the placement of the picture, whether it should go on the left, right or even at the center of your post. Customizing the appearance is also another way of showing your creativity in your post. It will also help you wrap your text around these pictures. Another benefit is that you're able to choose the right size deemed fit for that post. Do this by checking on the relevant "Choose a Layout" box and then finally, click "Upload Image" followed by "Done".

Once you have succesfully uploaded the image, click on the Edit Html tab, to make the necessary modifications to remove the said borders from appearing in your post page.

Normally when you upload a image in Blogger it is displayed as a hyperlink. If you would like to disable the hyperlink, remove the section marked in red.

This is an example markup of the inserted image, appearing on your post editor page.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="" alt="" id="BLOGGER_PHOTO_ID_5105259291560015234" border="0" /></a>

Note the closing </a> tag at the end of the example, remember to remove this.

Now, if you want to maintain the hyperlink and prefer not to have the borders surrounding the image, edit the img (tag) style attribute by inserting : border-style : none;

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="border-style: none; margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="" alt="" id="BLOGGER_PHOTO_ID_5105259291560015234" border="0" /></a>

This would ultimately remove the border surrounding your image as well as remove the hyperlink pointer that would normally appear if you align the cursor on top of the picture.


Kim said...

what a great post Nihal...
some very interesting information here and I will certainly save this for future reference..... :)

NIHAL said...

Hi Kim,

It's so wonderful to see you here again :)

Actually this post relates to a question posed by one of our blogging friends earlier this week. So, I decided that it would be kinda fun if I could share it with everyone out there.

Hope that it would come in handy when the time comes.

Sharon said...

Hello Nihal!

Awesome job on laying out the step-by-step instruction for this.

You would just breeze through Wordpress if you moved :)

darlene said...

that is great for those just are always so thoughfull....which always makes me return to you....;-)

NIHAL said...

Hello Sharon,

Ya, I understand what you mean coz my other site, car crazy, is on a self hosted WordPress layout, so I get to enjoy 'both worlds'.

Thanks once again for the visit, appreciate it :)

NIHAL said...

Hi Darlene,

Ya, it would sure come in handy for some, I guess. Anyway, blogging is about sharing, right? The wonder about CSS is limitless and if you really experience it, there's loads of other stuff you could do with it :)

Thanks always for those kind words, the feeling is always mutual :)

Mariuca said...

Nihal!!! Come and get it!!

JesseTheCat said...

Hello Nihal, I wish you had written this post for me when I just started blogging.Everything was so difficult to fathom, and many hours were spent trying to figure out the most basic things.How to upload images was one of my problem areas back then.I agree that if possible, one should use ones own images...I usually use pictures from a clip-art set that I have.I once copied a piece of clipart from another site, but they gave full permission for anyone to use it.I sent them a message of thanks.I enjoyed your post as sometimes I still battle with image placement.What should be easy is sometimes confusing.I also just read your post on 'No Follow', thanks,it was so helpful and I now understand much more of that confusing term.I really had no clue what 'no follow' meant! I am so glad that you linked me here on your fabulous site.I will do the same,as yours is not a blog I ever want to forget about!Nihal, thanks for all the comments and support you have given to me in the blogosphere, I appreciate it a whole lot.A very happy day to you and your family. :)

Nick Phillips, MY said...

Hey Nihal, great tip :) Glad to know there are people out there who don't mind sharing some of their knowledge to 'blog handicapped' people like me to make our blog layouts better :)

NIHAL said...

Hi Jesse,

Thanks for dropping by again, there is never a day that goes by without me hoping to hear from you :)

Ya, I know, sometimes the most simplest of things can turn out to be a pain-in-the-neck, and trying to find the solution can take one ages :(

I admit though that I'm no master-guru or anything when it comes to blogging, but it would be nice if somebody out there found stuff like these somewhat useful and that in itself, will make me a happy man :)

NIHAL said...

Hiya Nick,

Great to see you back buddy :)

(Please don't tell anyone this.... it took me about three months to figure this out actually..) *he he he*

Seriously, I was actually 'dumb-founded' in the beginning... man, how to get this done, I was thinking ???

But to be frank, it's a site like yours that makes me so envious.... you've got so much of talent Nick! At the end of the day, it's great contents like yours that will matter and not forgetting, the friendship we build along the way :)

Erina Hart said...

This was a great tutorial, Nihal! It is kind of you to share your knowledge with the blogging community :)

NIHAL said...

Hi Erina,

It's always a great pleasure to hear from you :)

I think sharing is a wonderful thing, and thankfully I have great friends like you around, who never fail to amuse me by "sharing" a few words as well.

Saying thank you is never enough in my opinion, to you and the rest of my blog friends :)

Speedcat Hollydale said...

Yes, yes...I agree with all these comments. The changes you provide let me "see" what it looks like, but until you do it, code is this mysterious language that makes NO sense. The way you explain HTML makes understanding easy! Thanks Nihal :)

SpeedyCat H.

NIHAL said...

Hiya Speedy,

It's so nice to hear from you again, buddy! Am glad that you felt that way. Things like HTML, CSS and PHP, can make a person go nuts if they can't get it right implementing them.

I believe in this statement : "Knowledge is useless, if we can't get to share it with others".

Once again, thanks so very much Speedy :)

Random Magus said...

That was really helpful - thank you

NIHAL said...

Hi Random Magus,

It's so nice to hear from you... am glad that you found the post to be somewhat useful.

Will definitely be back at your site more often, and thanks once again, see ya :)

Cathrine said...

:-) thanks for reminding me of this. Pre-blog days we all made our own sites ;-) and back then I always removed the border. Should do so now. Great posts you have. And I'm impressed that you caught the names of my children. Thank you.

NIHAL said...

Hello again, Cathrine :)

Ya, I guess blogging has made life that much easier for all of us, but it does take out the fun of creating your own one.

Phew! That was a close one, I made a mistake once at another site (so I was keeping my fingers, legs, arms and everything else crossed, on this one).

Am really glad you came today :)

Rolando said...

Cool, thanks for the tips Nihal!

NIHAL said...

Hi there Rolando,

I seriously think, removing the "nofollow' tags is something really good, and I'm so glad that you feel the same, my friend :)

nisha said...

hi nihal.. ive tagged u.. see my blog please.leave ur comments if wish:)

NIHAL said...

Hi Nisha,

A warm welcome to my blog :) Thanks for tagging me...but am not sure what's it all about? Will come by later, ya.

Thanks once again :)

Adrian said...

Nihal! Great tips dude! Will try this next time! Cheers to you and the family! :)

NIHAL said...

Hi there Adrian,

You're most welcome, buddy :)

Really am happy that you took the time to visit us and hope that this guide would help you get the job done.

Many thanks, once again :)

Simon said...

Thanks for the tip, Nihal. Just used it on my blog, and it works like a charm. I know some CSS, too. Don't know why I didn't think of this sooner.

NIHAL said...

Hi there, Simon.

Thanks for coming by and I'm really glad that this worked out well for you.

Once in a while, I kinda forget stuff like these too ... so no worries, my friend.

PS : Will come by your site, soon. Thanks and all the best :)