Sunday, July 5, 2009

How to Make Your Own Button
This is one of my favourite and most exciting blog secrets to share! You've all seen those fancy buttons with the html code underneath them, right? Well, here's how to make your own!

Design Your Button
The first thing you need to do is find an image for your button. Pick an image that represents your site. You can purchase your own images for cheap on royalty free stock image sites like StockXPert. Alternatively, you can just use text for your button if you'd like! Next, use a photo editing program to personalize your picture. If you don't have a photoediting program, here's one of my secrets for you! If you have a Facebook account, get an application called Picnik (or if you don't have a FB account you can go to their website). Picnik allows you to edit your pictures, resize them and add font to them for free! If you're using this program, you can easily resize your picture to a blogger sized one with a built in resize tool they have. If not, I usually make my buttons 150 x 150 pixels. When you're finished with your picture, save it as a .jpg and it should look something like this:

Share it With Html
Once your button is created, it's time to add the html code underneath. Log into your blogger account, click on Layout, then Page Elements, Add a Gadget, then the Html/Javascript option. Copy and paste this code:

Your picture needs to be hosted somewhere on the internet. So for the yourphotolocationhere, enter the URL of your picture. If you don't have a web hosting site, here's a little trick for you. You can use blogger's hosting service. Go to Layout, Page Elements, then Add a Gadget at the bottom of the page. Choose the Picture option. Upload your picture onto blogger. Once your picture is there, visit your blog and right-click your picture. Click on Properties. Copy the Address (URL) of the picture. And you can paste that address for yourphotolocationhere.

Congratulations, you just made your own button to share!

8 comments:

C. Body said...

TuTuTina, You are so
"retro-Fab-ulous" Darling. I think I'm in love. Since Marlo Thomas isn't here, you are "That Girl"!! Thanks!

tututina said...

thanks for the kind words!

Dinah said...

Thanks for this wonderful, wonderful tip! (Did I say it was wonderful?)

I now know how to make a button, lots of thanks to you!

yuuki said...

followed everything and was able to create my own badge! thanks tina!

btw, i linked this post on my blog.

rjblueyes said...

Thank you SOOOOOOOOOOOOO much for all your helpful hints and easy to follow instructions. Because of you I can make my own creations come to life. Thank you Tina!!! And congrats on your 1 million hits!

abiep said...

nice post, keep blogging
and let me read your cool gears

archiedelara said...

I like this website. Very simple... yet elegant!

Muhammad said...

hahaha