Tabbed Sidebar Navigation for Recent Posts, Labels and Archives

These past few weeks, many readers have requested a tutorial for tabbed sidebar navigation, including integrated widgets for recent posts, labels and archives. This customization is a useful and stylish method to organize widgets in your sidebar (or other widgetized area of your blog template): it reduces the space used in your sidebar, and offers readers easy access to the information they may need about your blog.



So in this tutorial I will explain the method I use for tabbed navigation in Blogger Buster including all the code and CSS styling so you can customize your own tabbed widget to match the theme of your blog.

About this tutorial

One of the reasons I have delayed writing this article is because of the vast differences between template styles. It is very easy to install and use tabbed sidebar navigation, but may be much more complicated to make this match the style of your own template.



For this reason, I will explain the style code I use for the tabbed widgets in Blogger Buster, along with methods you could use to change the appearance for your own blog.



If you experience problems styling the widgets to match your own template, please refer to the forum thread for this article where it is easier to offer and receive support.

Step One: Back-up Your Template!

When customizing your Blogger template, it is standard practice to back up your existing template first! This ensures you can revert back to your working template if you make a mistake. It is especially important with this customization as you may not notice such mistakes when previewing your design.



To back-up your Blogger template, go to Layout>Edit HTML and click on the "Download full template" link near the top of the page.



You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.

Step Two: Adding CSS Code

For this initial step of installing tabbed sidebar navigation, we will add the relevant style code. With this in place, it will be easier to see how your tabs will work.



To add this style code, find the closing tag in your template's HTML code.



Just BEFORE this line, paste the following section of code:

div.domtab{

    padding:0;

    width:100%;

    font-size:90%;

    }

ul.domtabs{

    float:left;

    width:100%;

    margin:0;   

    list-style:none;       

    padding-left: 0;   

    }

ul.domtabs li{

    float:left;

    padding:0 5px 0 0;

    text-align: center;

    width: 110px;

    }

ul.domtabs a:link,

ul.domtabs a:visited,

ul.domtabs a:active,

ul.domtabs a:hover{

    padding:.5em 1em 0;

    display:block;

    background:#999;

    color: #333;

    height:2em;

    font-weight:bold;

    text-decoration:none;

    }

html>body ul.domtabs a:link,

html>body ul.domtabs a:visited,

html>body ul.domtabs a:active,

html>body ul.domtabs a:hover{

    height:auto;

    min-height:2em;

    }

ul.domtabs a:hover{

    background:background:#ccc;

    }

div.domtab div{

    clear:both;

    width:auto;

    color:#ddd;

    padding:0 5px;

    margin: 0 0 1em 0;

    }

div.domtab div .sidebar-tab, div.domtab div .sidebar-tab .widget-content {

    margin: 0 0 0;

    padding: 0;

    }

ul.domtabs li.active a:link,

ul.domtabs li.active a:visited,

ul.domtabs li.active a:active,

ul.domtabs li.active a:hover{

    background:#ccc;

    color: #333;

    }

div.domtab div .sidebar-tab ul li {

    list-style: none;

    padding: 3px 0 5px 0;

    }

div.domtab div .sidebar-tab ul li a {

    list-style: none;    

    margin: 0;

    padding: 0;

    }

div.domtab div .sidebar-tab ul {

    width: 100%;

    margin: 0;

    padding: 0;

    }

#domtabprintview{

    float:right;

    padding-right:1em;

    text-align:right;

    }

#domtabprintview a:link,

#domtabprintview a:visited,

#domtabprintview a:active,

#domtabprintview a:hover{

    color:#ccc;

    }

div.domtab div a:link,

div.domtab div a:visited,

div.domtab div a:active{

    color:$linkcolor;

    padding:1em .5em;

    font:bodyfont;

    text-decoration: none;

    }

div.domtab div h2 a,

div.domtab div h2 a:hover,

div.domtab div h2 a:active{

    color:#cfc;

    display:inline;

    padding:0;

    font-weight:normal;

    font-size:1em;

    }



body#layout #sidebar-tabs-1 .widget,

body#layout #sidebar-tabs-2 .widget,

body#layout #sidebar-tabs-3 .widget {

    display: block; clear: both;

    }

div.domtab div {display: block; clear: both;}

Be sure to copy all of the code inside this box before you paste this into your template.

Step Two: Add JavaScript Code to the Head Section of your Template

The tabbed navigation requires JavaScript to switch between the different widget areas. To add this functionality to your template, locate the closing tag in your template, and paste the following lines of code immedietly before this line: