14 March 2011

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.


  1. Wow Jill your blog is so CUTE, and PERSONALIZED. I should have you decorate my blog and make it all cool lookin' like yours!

  2. Hey Stephanie, I'd love to help you with your blog! Let's do it!

  3. ahhhh! this is one of the key things that has been plaguing me and I've been wanting for my blog! thanks so much for this tutorial and your comment on my blog leading me to YOUR blog so I could find this!

  4. Ok, I have to follow you now! You are very clever! I wouldn't have thought to do this and it's so much easier than html! Thanks!


Thank you for your comment! I love to hear from you--your comments make my day!

I've been getting a lot of spam comments lately, so I'll not be allowing anonymous comments for the time being. Sorry to any legitimate anonymous commenters!