Tabbed Sidebar for Blogger

Tabs are well know for being very useful to everyone, specially for those who have a lot of content on their blogs and spend much time thinking where to place new stuff.

I know there are quite a few tutorials around about making tabs for blogger, but they all have one thing in common, are kind of difficult to implement, and may confuse some users.

The method I developed is inspired in a tutorial from Webitect, I just found it very useful and decided to adapt that technique to Blogger platform. This tutorial will bring you a very easy to implement way to make tabs out of your sidebar widgets, here are some features of my method:

  • Easy to install.
  • No need edit html in Sidebar part.
  • Automatically place your handpicked widgets inside tabs.
  • Freedom to set what widgets stay out of the tabs.
  • After implementing, Widgets are normally edited from Page Elements section.

The Final Result

If you want to see it working please check the live demo.

Step 1 – Placing the styles on your CSS

The style of the tabs can be easily changed anytime just using CSS, but this is not the main reason for this tutorial, It’s up to you to change or not, use your own CSS skills. We’ve made a general layout for it, to install it just place the following code right before the ]]></b:skin> line: