125 Tabbed Sidebar Navigation for Recent Posts, Labels and Archives August 06, 2008 /

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 </b:skin> 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 </head> tag in your template, and paste the following lines of code immedietly before this line:

<!--[if gt IE 6]>
    <style type="text/css">
        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:3em;
        }
    </style>
<![endif]-->
    <script src='http://bloggerbuster.com/scripts/domtab/domtab.js' type='text/javascript'/>

If you prefer to host the JavaScript required for this customization on your own server, feel free to download the script and alter the tags above to reflect the location on your own server.

Save your template at this point.

Step Four: Add The Required Code to your Sidebar

For this step, you will need to find the opening DIV tag for your sidebar.

In most Blogger templates, this tag will appear like this (highlighted in red):

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar-top-section' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Subscribe' type='HTML'>

However, you may need to be creative! In some templates, the sidebar section is coded like these examples, or possibly something else entirely!

• <div id='sidebar>
• <div id='right-column'>
  

Whatever the opening DIV for your sidebar section appears like, you need to paste the following section of code immedietly after it, and before the opening <b:section> tag:

<div class='domtab'>
    <ul class='domtabs'>
        <li><a href='#recent'>Recent Posts</a></li>
        <li><a href='#cats'>Categories</a></li>
        <li><a href='#arc'>Archives</a></li>

    </ul>
    <div style='border: 3px solid #ccc;'>
        <p><a id='recent' name='recent'> </a><b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='Feed99' locked='false' title='' type='Feed'>
<b:includable id='main'>
    <div class='widget-content'>
    <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
      <b:loop values='data:feedData.items' var='i'>
        <li class='sidebar-list'>
          <span class='item-title'>
            <a expr:href='data:i.alternate.href'>
              <data:i.title/>
            </a>
          </span>
          <b:if cond='data:showItemDate'>
            <b:if cond='data:i.str_published != ""'>
              <span class='item-date'>
                 - <data:i.str_published/>
              </span>
            </b:if>
          </b:if>
          <b:if cond='data:showItemAuthor'>
            <b:if cond='data:i.author != ""'>
              <span class='item-author'>
                 - <data:i.author/>
              </span>
            </b:if>
          </b:if>
        </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>
</b:section></p>

    </div>
    <div style='border: 3px solid #ccc;'>
        <p><a id='cats' name='cats'> </a><b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li class='sidebar-list'>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section></p>
    </div>
    <div style='border: 3px solid #ccc;'>
<p><a id='what' name='arc'/>
        <a id='arc' name='arc'> </a><b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='BlogArchive99' locked='false' title='' type='BlogArchive'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='flat' var='data'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul>
        <li expr:class='"archivedate " + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == "expanded"'>
    <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" +       "&dir=close&toggle=" + data:interval.toggleId +       "&toggleopen=" + data:toggleopen'>
        <span class='zippy toggle-open'>▼ </span>
    </a>
  <b:else/>
    <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" +         "&dir=open&toggle=" + data:interval.toggleId +         "&toggleopen=" + data:toggleopen'>
          <span class='zippy'>
            <b:if cond='data:blog.languageDirection == "rtl"'>
              ◄
            <b:else/>
              ►
            </b:if>
          </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
</b:widget>
</b:section></p>
    </div>

</div>

Again, be sure to copy all of the code in the scrolling box above before pasting this into your template.

To help anyone who has experienced the "Your template could not be parsed" error when trying to copy and paste this code, I have copied all the above to a text file which you can download here.

• Code for tabbed widget in sidebar (TXT file)

I hope this will help solve these problems for you!

Now, preview your template. If you have made any errors when copying and pasting the code, you will be unable to preview your template. In this case, click on the "Clear edits" button near the bottom of the page and begin again, ensuring you have copied all of the code from the box above. Be sure you paste your code between the opening DIV tag for your sidebar and the opening b:section tag.

If your installation is successful, you will see a tabbed section above your regular sidebar widgets. As you are previewing your template, the initial section will be blank. This is the Feed widget where we can add the URL for your blog feed to display these recent posts. In this instance, save your template so we can add the recent posts and perhaps change some style elements for your tabbed widget area.

Step Five: Add the Feed URL for Recent Posts

Once you have successfully installed the tabbed navigation code and saved your template, it's time to add the URL to your blog feed. This will enable you to display recent posts in the first tabbed section.

Go to Layout>Page Elements in your Blogger dashboard and look out for the new widget section which should appear like this:

Click on the "Edit" link, and add the URL to your blog feed in the pop-up window:

Choose how many items to display, and then click save. This will add your recent posts to your tabbed sidebar navigation widget.

Note: It is not possible to drag and drop the Feed, Label or Archive elements for your tabbed widget on the Page Elements page. These elements appear stacked on top of each other, and cannot be moved separately; this is also why the Feed widget looks different to other page elements on this page.


At the moment, this is a bug of the tabbed widget. Despite many attempts, I have been unable to prevent these widgets from stacking on top of one another, and it is impossible to edit the Archive and Label widgets on this page. If anyone can figure out a solution, I would be very glad to hear from you!

Step Six: Customizing the Appearance of your Tabbed Widgets

Depending on the template you are using, this may be the most complicated step of installation!

The default style code I have offered in this tutorial will be suitable for pale templates with a wide sidebar. If you have a narrow sidebar or different color scheme, you will almost certainly need to change some elements of the style!

Here are the most prominent style issues, and what you can do to resolve them:

The tabs appear on top of each other

This will happen if the combined width of your tabs is wider than the width of the sidebar area.

To alter this, you will need to change the width for the tabs. Here is the section of code you need to change:

ul.domtabs li{
    float:left;
    padding:0 5px 0 0;
    text-align: center;
    width: 110px;
    }

Reduce the width to a smaller pixel value. For example, if your sidebar is 200px wide, change the tab width to 60px. Then the combined width of the three tabs will equal 180px and allow for space between them.

Changing the color of borders and tabs

In the code for this tutorial, I have used two shades of grey for the border and tab colors:

• #ccc is the paler grey
• #999 is the slightly darker shade

Using your browser's search function, you can locate all instances of these colors in the style section of your template and replace these with the hex values for your preferred colors instead.

Over to you!

As I mentioned at the beginning of this tutorial, different template designs may require different methods for customizing the appearance of your tabbed widgets. To offer support, I have created a thread in the Blogger Buster forums specifically for help with this tutorial.

If you need help customizing your widget, please post your questions there with some details of the template you are using or a link to your blog. It's much easier for me to post code on the forums than in comments, and also provides a means for others to locate solutions of they are using a similar template style.


I hope this tutorial has provided a good explanation of how to install tabbed navigation in your Blogger template! Please feel free to leave your comments and opinions about this tutorial, or if you have suggestions for how this may be enhanced.