Wednesday, May 21, 2008

HTML Button Tutorial

Photobucket

I created this HTML button without knowing how to write HTML code. When I first started researching how to make these buttons I could never find a good tutorial. All the tutorials out there just showed me how to make text chicklets. I wanted to use my own image. So I figured out a super easy way to make image html buttons. Here's the process.

*Disclaimer - I do not write HTML code. I am not an expert. I simply figured this out and wanted to share it with everyone.

The first thing you will need is a photobucket account, click here. It's free and easy to set up.

Why Photobucket? Photobucket provides a code for you that can easily be altered. Plus you will need a place to store your image.

Choose an image you want for a button. I recommend saving it in the jpeg format. Also, you will want your image to be the actual pixel size of how you want to view it. For example the button above is 100px by 100px. This button size works well because it fits on most blog sidebars.

After you upload your picture in photobucket, click on the image. In the bottom, right hand corner of your screen you should see this box.
Right Click on the code titled "HTML Code - Websites & Blogs" and click copy. Save the code somewhere you can alter it. I saved it in Word.

You will now have a code that looks like this.

"click on above image to see better"

Now replace the highlighted area with the web address you want your button to link to. Which I'm guessing would be your site's address.

NEW Next replace alt="Photobucket" with atl="Your site's name". Whatever words you replace with Photobucket will show in case the picture is not available for some reason. That's it, you have now created the html code for your button.

*One last thing, to display the code for people to see you'll need to drop it into a code box. This is very easy to do as well. Here's the link that gives you the code for the box. You might need to scroll down a little to see it.

If you have any questions feel free to leave a comment or email me. I'll do my best to answer any questions.

58 comments:

mushroommeadows said...

Awesome tutorial! Very helpful indeed. :)

Hurrayic said...

Thanks so much. I think I'll cut and paste this into a document so that I can refer to it later on. Does it have to be photobucket or can flickr work too?

M.KATE said...

Now, this is one of the best advise I've read, very2 interesting...just might try it.

happy weekend :)

kirin said...

Hi, I came from bunbun's blog. I'm a Japanese girl living in Japan and also love kawaii things! Your zakka crafts are all kawaii, and your taste can be loved by Japanese girls. There are many kawaii things and small trivial but just so kawaii zakka in Japan.
I do love shopping or even just browsing them at some interior shops, zakka shops, or stationary shops. It's cool you have such ideas for kawaii goods and create them in real. Keep up the good work. (^0^)/~~

Purnima said...

Sounds interesting ..will try it out!

Jocelan Thiessen said...

oh great tutorial i have to learn this too!

Christine Bean said...

AWESOME tutorial! Thanks,
Christine Bean
www.christinebean.com

Marcia said...

Thanks! I actually understood that tutorial. I'm sooo computer illiterate.

kawaii crafter said...

Marcia, so glad to hear that the tutorial is easy to understand. Thanks for leaving a comment! They're always appreciated.

cinnamonspice said...

this is a great tutorial! i can't wait to try it...thanks for stopping by my blog!

Jane @ Kidzarama said...

That's a fantastic how~to, Kawaii!

I'm going to be using this tonight. :D

Ginger said...

That is so cool yup well look for some kind of imag for a button want to thank you so much for the tutorial on this awesome clear and going to make a button am so happy always wanted to do this!

ngaire B said...

BRILLIANT!!! Thankyou SO much for this! I am thrilled!!!

kawaii crafter said...

ngaire b,

your welcome!

let me know if you have any questions

Jamie said...

This was FREAKING AWESOME!!! I've been wanting this for quite sometime & your tutorial made it SO easy! Thanks a million!

Robin@creations-anew.com said...

Fantastic...thank you so much!

Robin
http://www.creations-anew.com

Farrah said...

I was wondering how to add the code box. :-) Thanks for sharing! :-)

Farrah from...
www.wifeandmomof3.net
www.tbfreviews.wordpress.com

Laurie said...

WOW, I'm a computer moron and you made that so easy even I could do it!! Thank you!

Jenelle said...

THANK YOU!!!! I recently asked another blogger how to make a button, and she told me, "It was a lot of work, and it required me to learn photo editing software. You can probably find a book at your local library."
Riiiiight.
So thank you for the simple instructions! You can view the button I made at http://jadeinmywindow.wordpress.com. It's the Health Nut button. :)

lorela said...

thanks for this one! i dont know html that much, so a simple guide is best for me...

Miss Nanas said...

This was beyond helpful! IT was easy to understand and I was able to make my own button in no time at all.

Just wanted to thank you for doing these tutorials!

The Glamorous Life Association said...

I can not thank you enough for this.I thought it was a big secret how this was done!!!! Really really cool of you to share!

Sharing is GLAMOROUS. You are a lifetime member now!

The Glamorous Life said...

Okay seriously. I just did it. And it worked.
I am amazed!

Thanks again. Really.

Genejosh said...

very helpful...for the code the link you gave isn't working in my blog so I searched for another..thank u very much! check out my new button...

adiaha said...

Thank you for this information! It has been so helpful!

Peace. Love. Light.

girlichef said...

ohmygosh...thank u soooo much!! I have been trying to figure out how to do this for a while now. So glad to have found your post :D

evilsquirrel01 said...

thanks! this is so helpful!

Alycia Wicker said...

Thanks for posting this! So helpful!

Michelle Soldatos said...

Wonderful tutorial!! Extremely Easy!! I had my button on my blog in 15mins. Thankyou!!!

3ndzy said...

Arigato Gozaimasu!!! thank you very much! can pls teach on the code box..

Cher Cabula said...

I made one with a text grab box. Thanks for the tutorial, I tried to write one as well. Check it out.

spanky* said...

thanks! this totally worked! i linked to your blog!!!

Grace said...

I had been looking for a tutorial just like this one. Thanks.

Heather said...

I linked to you (it posts Monday). Thanks for the easy explanation!

Cacai M. said...

Thank you for the info. It makes my quest easy. I already made a code before was being taught then by my friend but this time I have now my first badge with my first code of it. Thanks.. I just only change the row into 4 and the cols into 20. Thanks again. Cool tutorial. :-)

Gravel Road Jewelry said...

Hi! Thank you for this great tutorial!
:)

Mandy P said...

This is awesome!!!!!! Thank you...how do I get text on my badge (over my picture)?

~Mandy

eithei said...

thank you thank you u saved my life haha :D

Kathy said...

THANK YOU!!!!!!!!!!!

Huckleberrygal said...

You are so awesome! I was able to post a button for my blog because of you. Thanks so much!

BabyMommaBlog said...

Great post! Very easy to do! Your instructions were awesome! Thank you!

Jennifer said...

Great, easy to follow tutorial. Ready to add to my site now.

JanJay said...

Thanks so much, you made it easy to follow & i'm so chuffed I've made a blog badge!

Jan x

LongIslandMomx2 said...

Fantastic Tutorial!! Best out there! Thank you so much!!

SimplyOrganizedOnline said...

WOW!!! Thank you so much for publishing this post! I now have a badge on my new{er} blog!!!

Thank you, thank you, thank you!!!

Jennifer said...

I have to join the excited chorus of all these other folks! Thank you, thank you, thanks you. Without your amazing and easy post to follow I am sure my computer would have been in teeny tiny little pieces!

Wilfreda said...

Thanks for posting this info. You made it so easy.

sweetdet said...

Hi! Thank you for your help. I been trying to google this for a week, I'm glad that i found your blog.

danikeith said...

thank you for this great post, i made my badge in like 5 minutes! so so helpful

Elizabeth said...

I used this and it worked. Did mine in Flickr. Thanks so much for sharing the knowledge!!

Elizabeth

Fanciful Fran said...

weeew!! can't wait to try this one out! thnx for sharing this! :D

Gabi said...

Thanks for sharing this knowledge. Made my badge to help raise funds for charity.

Great tutorial!

Tracy said...

Thank you for your instructions for applying badges on to blogs. I have trying to do this for a while and in the last three days have found some helpful advice but yours is the best!

Tracy said...

Hi there..I have a question. I would like to create a link from my badge to a map on google, could you share some advice please.

Thanks once again for your HTML button tutorial!
It worked a treat :)

Tracy said...

hi there, i have a question about making a twitter badge.
When i have copied the address from a/c at twitter and paste into where i want my link to go to. It shows a different link, i can see my a/c but doesnt take me there directly.
Please help.

Eliana Tardio said...

thank you! it works great!

ratna said...

hi! it works for me too!!!
thanks a lot.

visit me @http://stylobooku.blogspot.com/

Kit said...

Oh my goodness- this is just absolutely fantastic! I've been trying to work out how to make a button for soooo long!