How To Make Custom Navigation Tabs

(Once again, the evil laugh of success.)

I told you in my post about adding navigation tabs (aka Pages) under your blog's heading that I had an idea for how to make these customized.  Well, it worked.  (Bwa-ha-ha-ha-ha!)  I'd read other tutorials about how to do this, but they involved all this html stuff that I really didn't understand.  So I just kept thinking about it and hopeing there was an easier way to accomplish the same thing.

Then it occurred to me--What is the difference between a blog button and a navigation tab?  Nothing.

So here's what you do.

First, whip up some completely awe-inspiring Pages.  (You do not have to have added the Pages gadget to do this.)

Then, use your favorite image editing software to design your new, unique tabs (one for each page).  Upload the images to Photobucket or some similar website.

Next, on Blogger, go to Design-->Page Elements (Update:  It's under "Layout" now)-->Add a Gadget right under your header, like in my other tutorial.  This time, add the HTML/JavaScript gadget.  (If you already have the Pages gadget, you can delete it.  Don't worry, your pages won't disappear.  I tried it just to make sure.)

Now paste this into the space for "Content," and replace the red text with your own info.

<a href="the url of the page you want this tab to take you to" mce_href="the url of the page you want this tab to take you to"><img src="the url where the image is hosted aka Direct Link on photobucket" mce_src="the url where the image is hosted aka Direct Link on photobucket" border="0" /></a>

(I don't know why everything is there twice; all I know is that this does work.)

Do this for each of your tabs (in the same HTML gadget--you don't need to add multiple gadgets).  Click Save, and you're done!

Here are my tabs.  What do you think?  I'm not completely in love with them, myself, but the'll do for now.