DIY | Custom Navigation Bar Tutorial


I've had a lot of people ask me lately how I have a custom navigation bar with links like labels and posts and not just the typical Blogger pages. I thought I'd clear things up with a quick tutorial post to show anyone who wants to know how it's done!

This tutorial is for Blogger. If you are a Wordpress or Tumblr blogger, I'm not sure this will help you. But for all my Blogger users out there, this is how you do it... First, head into your Design tab under your Dashboard. Click the "Edit HTML" link.

Scroll down until you find this code [or you could just use your Command/Ctrl 'F' and find it that way]:



Change the "1" to "3" and the "no" to "yes" [shown in blue] so that your HTML now looks like this:






Save your changes and when you return back to the Design tab you should see an "Add Gadget" option above or under where your header is. You've pretty much told your blog code that you want to be able to add up to 3 gadgets in your header. You're almost there!

Next you need to find out how large your outer wrapper is [the area where your blog is] by searching for "outer-wrapper" in your HTML. It will tell you how many pixels it is wide. Now it's time for a little math. The amount of tabs you want in your navigation bar needs to fit evenly [or at least look nice] with the rest of your blog. Let's say your outer wrapper is 1000 pixels wide and you want 5 tabs. Each tab will be about 200 pixels wide [it will actually need to be slightly smaller due to spacing between each button] This part will require a little bit of trial-and-error. You may need to make your outer-wrapper size a bit bigger or your tabs a bit smaller to make sure they all fit on one row.
Once you figure out how big each tab needs to be, open up Photoshop [or any editor where you can save something to the small size you need] and create a file the size you need [i.e. 200pxx75px] and type out the text for each button.


Once you have each tab the way you want them to look, save them as a JPEG file. Open up Photobucket [or whatever online image hosting site you use] and save them there so that you can get the URL for each photo.


Once you've saved all your tabs, go back to blogger and click the new "Add Gadget" link where your header is. Choose the HTML gadget. Here comes the final step...

In the HTML gadget you will be adding each tab image as a separate link, in the end it will end up looking like a navigation bar when in reality it's exactly the same as the blog buttons you see on many blogs out there [like me!]

Enter this HTML for each of your tabs you want. One right after the other. I put spaces between each just so it's easy to read if I ever come back to change something
Add the information that pertains to your tabs where you see blue. Hit save. And huzzah! You now have a custom navigation bar!

Let me know if you have any questions or if something isn't clear. It's sometimes hard doing a tutorial and making something make sense that's in my head :] In other news, I made my first meal for my Foodie Challenge 2011 tonight! It was a smashing success! Check back tomorrow for the full post! Have a lovely night!

4 comments

  1. This is such a great tutorial! I've got it bookmarked for when I eventually get around to redesigning my blog. Thanks Allison.

    ReplyDelete
  2. Thank you, thank you, thank you! I have been searching for a tutorial on how to do this and was so happy when I finally found yours! Check out my site at http://bisforboycreations.blogspot.com/

    ReplyDelete
  3. Hm ... I can't seem to find that code - the header-wrapper code. Am I usign the wrong type of blogger template?

    Thanks for the tut, though - this is awesome! :)

    Ammy Belle

    ReplyDelete

Thanks for stopping by! I'd love to know what you think!
-Allison