I’ve had several people ask about the new tabbed navigation box on my blog.
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:
- Makes it easy to navigate through your blog
- Efficient use of space
- 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.
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:
Note: To insert more tabs, find the
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!