MAR
27
2010

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!

Related Posts Plugin for WordPress, Blogger...

Comments

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

  2. 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?

  3. 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.

  4. 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.

  5. 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

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

  7. Thank you! Love your horizontal drop down bar!

  8. 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.

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

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

  11. I love the way yours looks. Thanks for posting the info. I have been playing around with this on my test blog and it won't let me click on the numbers to add gadgets. I am not sure why. Did you have to change anything once you added all of the code to your blog for it to work? I understand about about changing colors, but was there anything else? I must not be doing something right. Thanks in advance for your help.

  12. I have been playing around with this for about an hour now. ARGGGG!I will not give up.I will not give up.

  13. I WILL conquer this! :)

  14. Thanks for these tutorials. I'm starting a blog to store learning activities. I put in the top navigation bar in minutes (choosing the colors took a bit longer–LOL!). The side tabbed navigation bar has got me stumped. I've spent several hours and switched to 3 different blog templates. No matter what I try the widget ends up on the bottom right. I've told myself twice that I'm done trying, but I really want to figure it out:)Any thoughts on placement?

  15. JENNY: If it’s on the bottom right, then it’s either too wide, or your sidebar is too skinny for it.Go into the HTML for your tabber and find this:#tabsidebar-wrapper{width: 360px; /* size of the tabbed Sidebar */float: left;border: 2px none #f88c91; /* dkpink */}Change the width:360px to whatever your sidebar width is or a few pixels smaller. You can find your sidebar width by searching your HTML for ‘sidebar’. It might be called right-sidebar or something similar.

  16. got it! Thanks for this

  17. Love this!! I did it yesterday on my blog, and then just posted a link here. Thank you so much. :)Blessings!-Sarah

  18. i finally got the side bar tabber to show up and adjusted the width of it per your instructions above… but try as i might i cannot get a "editing wrench" thingy to show up in my layout that allows me to click it to "add a gadget" to that tabber area.any ideas/suggestions? I even tried moving to the LEFT and got the same thing.. it doesn't show up on the layout view, but DOES appear on the "live" view of the test blog…

  19. Angi: Can you go into the Design Tab then click on Page Elements and see it there on the right side with all your other widgets?Blogger moved over to draft mode, so it's missing for me now in there, but maybe you can see it. Also check the width of your tabber box, if it's too small blogger cuts off the toolbox icon. Mine is at 350px I think.

  20. no, the tabber thing shows up when i "view the blog" (as if i were looking at the live blog, though it is set to private since it is just a test. However, i cannot see anything to do with that tabber area whatsover in the Page Elements window. I see lots of places to click to "add a gadget" if i wish but nothing at all leading to anything to do with tabber area I just added in my coding.

  21. ANGI: I'd have to take a look at it to see what's going on. Sounds like you can see it in the view blog area, but don't have a way to edit it, so I'd have to look in your code to see what's going on.You can send me an email directly instead of going through comments if you want: homeschooler confessions {at} gmail {dot} com

  22. I'm having the same problem Angi was having. I can see it on my live blog, but have no way to edit it. Just wondering if she ever figured it out…Please let me know!

  23. I just want to thank you for such a wonderful blog with so many great ideas I have been using a lot of your ideas but I always post a link back to your blog and also thanks so much for this awesome tutorial for the horizontal drop down bar,I do seem to be having trouble with adding more sub tabs, any tips would be greatly appreciated.ThanksDanahttp://playandlearnwithdana.blogspot.com/

  24. I did all the steps he said to do. I have three tabs on my blog, but no where to edit them. It doesn't even show up as anything on my layout screen. Am I doing something wrong?

  25. I'm new to your blog and I absolutely love it! I'm pulling my hair out on this tutorial though…ugh. I can't find the sidebar code in my blog to save my soul! lol I did get it finally to show up on my test blog, but it was at the bottom! Thanks for posting this, I'm keeping at it! lol :)

  26. I loved your top bar tutorial, and was able to get that working on my blog. This one is making me crazy though! I have walked through his steps 3 times, and nothing shows up ?! Not sure what to do…Janna

  27. Hi EricaBlogger Sentral now has an EASY widget for this.It's so simple, copy code, add html/java widget, paste the code, and save.Check it outhttp://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html

Speak Your Mind

*


*