Thursday, September 24, 2009

Tutorial: How to Create FUN Navigational Buttons

I have read many sites on how to do these, and just couldn't get it to work! They were either crooked or there were gaps or it just looked stupid! So I made my own way to do it that is less complicated and WAY easier for design-challenged people like me.

Like always you are going to need a photo manipulation program like Photoshop Elements or one of the freebies you can download (If you need a list see my sidebar).

What I did on my blog, 4 Nuts in a Nutshell, is that I made every one of my buttons on it's own. I tried to combine them, cut and paste and be all fancy, but it looked like trash! No joke. So I made each button separately.

*note: you are going to want to be careful about the sizes, because you want them to fit across your page, but not stack. You can check the length of your header in your HTML editor look for this:

#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:0px solid $bordercolor;

That is the magic number.

I am doing this tutorial for some buttons for this site. They are supposed to be Jelly Beans... but I made them in a hurry and they look a little shifty. LOL. I will fix them later -- but for now, this is how you do them.I chose to do Jelly Beans to go with the whole Bean theme... ha ha... Anyway...

Now you can do your buttons in two ways when designing. You can create a file with the length you need and make all your buttons in a row and cut and paste them separate when you are done. This is for a more experienced photoshop user.
Easier way: Make each button separate. Just make sure that all of their lengths added together isn't longer than your header.

Either way, they need to look like this:Because each button needs to be saved individually. Now, if you have the checkered transparent background, remember they need to be saved as PNG files. If they have white or another color background you can save them as JPG files.

Next, they need to be uploaded to an online image host like photobucket or ImageShack, so they will each have their own HTML code.

Decide what order you want the buttons in and copy and paste each HTML code into ONE HTML/ JavaScript gadget. Paste them right after each other, no spaces or hard enters. Like this:You can then click on the "Rich Text" link and it will show you your buttons:
Now you need to link the buttons to the pages you want. To do this, highlight one of the buttons like I have above, and click the "Link" button (little globe with the eternity sign on it) next you will type or paste the address you want the button linked to. Example: My "Home" button is linked to http://catspillsthebeans.blogspot.com. My other buttons are linked to certain posts.

When you are finished, click save. Now, if you added the link to the side bar, the buttons need to be moved so that they are under and line up with your header. You can do this in the "Element" tab of "Layout" -- just drag and place.

However, you can get an "Add a Gadget" option by your header to begin with if you follow this tutorial here!

Now just save and look! You might have to go back and make a few changes... my first attempt left my buttons spaced funny, so I went back and cropped them. Now it looks pretty good considering I didn't take too much time on them!

If I missed anything, or you have any questions, feel free to email me or leave me a comment! Thanks!

5 comments:

Our Family said...

I think the jelly beans turned out really cute!

Dawn Farias said...

Wow, "you rock" again. Great tutorial!

Steph said...

Thank you so much! This was awesome!! I have been trying to figure this out for weeks!

Cat said...

You Rock!!
I love ur blog..

I'd love to see a tutorial on how to make and install post dividers..
And sidebar dividers too..

Thanks so much..

jellybeans2010 said...

hi there! is there any way i can add the navigation buttons in such a way that they will link me to different posts within the blog? thanks for the help in advance!

Blog Widget by LinkWithin