Multi Tabbed Navigation Widget For Blogger

I’ve had several people ask about the new tabbed navigation box on my blog.

tabbed

I have to say this was super easy to install! After trying several other tabbed widgets, this was by far the easiest and most successful to install, so I wanted to share it all with you!

This code was developed by Patrick Fitzgerald of BarelyFutz Designs, who created clear, easy to read script that makes it easy for people like me to de-clutter and maximize the space on my blog. As an added bonus, this CSS is clearly commented, so its easy to customize to match your blog!

Why do a tabbed sidebar? Just some reasons to help you decide if this is for you before you start messing with your blog:

  1. Makes it easy to navigate through your blog
  2. Efficient use of space
  3. Reduces the load time

So, if you’re ready to proceed, here is a step by step tutorial on creating this bloggy goodness:

STEP 1: Download your current blog template (DO NOT SKIP THIS STEP!)

  • In BLOGGER: Click on your “LAYOUT” tab, then on “EDIT HTML”. At the top, click the link that says “DOWNLOAD FULL TEMPLATE”. This will create a backup of your blog onto your computer just incase you mess up.
  • I highly suggest making changes like this on a “Test Blog” before implementing it on your live site. (In Blogger go to your dashboard and at the top right there is an option to create a new blog.)

STEP 2: Follow carefully the instructions in this tutorial:

  • (NOTE: Just FYI, my outer-wrapper is set to 880px, my main-wrapper is set to 450px and my right sidebar is set to 360px to accommodate the size of my tabbed navigation box.)
  • Once you have practiced on your Test blog, then you can REPEAT the steps on your live blog. DO NOT OVERWRITE YOUR LIVE SITE WITH THE TEST HTML you will lose all of your other settings and possibly posts/comments etc.

STEP 3: Customize the CSS template with colors that match your blog. Here are some online color sites to help:

STEP 4: Add A Gadget to each Tab:

  • Add Gadget: After you add the tabbed navigation bar, it will be empty. Next go into the "Layout" and "Page Elements" screen where you would normally "Add A Gadget". You should see your new tabbed box wherever you put it. Click on the "1" and there will be a box that says "add a gadget". Select your gadget to add, then repeat for the remaining numbers in your tabbed navigation box. 
  • Tab Title: Make sure to put a name in the "Title" section when you add your gadget, the tab will take on whatever you type in the Title.

navba2

Note: If yours doesn’t look like this, you may have to add the gadgets from your ‘view blog’ screen and click on the little tool icon at the bottom of your tabbed box to add a gadget for each tab as circled in RED below: 

tabbed2

Note: To insert more tabs, find the

or
section where you originally added the code in Step 3 of the TechTasks tutorial. Then simply copy and paste the div section for each additional tab you want to add:

id=’tabbertab1′ maxwidgets=’1′ showaddelement=’yes’>

Just make sure to rename the id=’tabbertab1’ with a new value such as tabbertab4, tabbertab5 etc. (Just be aware of how many tabs you add based on how wide your sidebar is. If there are too many, the tabs will wrap around to the bottom so they’re stacked on top of each other.)

STEP 5: View your blog and give yourself a big High 5 for being so AWESOME!

Good Luck and Happy Blogging!

27 Comments

  • Joyful Learner March 27, 2010 at 12:25 am

    Is this for your side bar or top bar? I love how you did your top bar. Any tips?

    Reply
  • Caroline (Frogmum) March 27, 2010 at 4:21 am

    I played into the early hours with this ~ you much be so much more clever than me!! WHERE do you find the link to your posts and labels. I've tried to look at you page elements, but the links are 'bitly processed' so no clues there! What did you add as the URL (if I need it) to those?

    Reply
  • Confessions Of A Homeschooler March 27, 2010 at 9:01 am

    It is the tabbed bar on the top right sidebar of my blog, then I have a 2nd lower right sidebar for the rest of the stuff.

    Reply
  • Confessions Of A Homeschooler March 27, 2010 at 9:04 am

    Caroline:The instructions are in the tutorial, but after you add the tabbed navigation bar, then you go into the Layout view and click on the "1" and there will be a box that says "add a gadget". Click on that for each number to add your widgets into your tabbed navigation bar.

    Reply
  • Laura @ Laura Williams' Musings March 27, 2010 at 9:47 am

    thank you Erica! I may try installing this one on my blog this weekend.Your top drop down boxes inspired me to do mine similiar and after fighting with the html code for almost 2 days, I finally got it all purty. lol Html and I do not get along very well. lol

    Reply
  • Confessions Of A Homeschooler March 27, 2010 at 11:51 am

    I'm getting ready to post an tutorial on the horizontal top drop down navigation menu bar next.

    Reply
  • Joyful Learner March 27, 2010 at 12:08 pm

    Thank you! Love your horizontal drop down bar!

    Reply
  • Lindsay March 27, 2010 at 5:24 pm

    oo looks so good! It definitely frees up a lot of space. I haven't added things to my sidebar because I hate the cluttered feeling. I might have to give this a shot.

    Reply
  • Ticia March 28, 2010 at 7:32 pm

    Okay, I am so going to have to figure out how to do this.Thanks for the great tutorial!

    Reply
  • Heather March 29, 2010 at 7:51 am

    This is great! Thanks for sharing! But, how did you get more than one tab?

    Reply
1 2 3

Leave a Comment