Tabbed systemA tabbed navigation system is always good for organization, especially when the space is very reduced. In this post, we will learn how to implement the easiest script I’ve found for this (via Blogger Buster), anywhere in our blogs and even use it with Blogger’s Feed, Labels and Blog Archive widgets in our sidebars, as explained in Amanda’s original post.

I had tried three different scripts before this one: Control.Tabs, Fabtabulous, and idTabs. The first two needed the Prototype library, and idTabs worked with jQuery. I was satisfied with the results; however, they were either too heavy or they worked with other external JavaScript libraries. Differently, this script is relatively fast and does not require any external JavaScript library. :D

Note: I strongly recommend you to backup your template, before adding anything.

Installation

We first need to install the script. To do this, we must add the following code, before </head>:

<script src='http://quiterandom.com/js/domtab/domtab.js' type='text/javascript'> </script>

I’ve uploaded the script to my server, but we can always download it and upload it to our own host or free hosting service.

Customization

General

In order to style the tabs, we need to copy and customize the following code, right before ]]</b:skin>.

Note that the following styling includes, basically: background, border and text colors; margin and padding measures; as well as floating and aligning properties. All other styling will match with the one already set in your current template, so you do not have to worry about how your headings, links, images, text, etc. will look inside the containers.

/*main container*/
div.domtab {margin: 0; padding: 0;}

/*tabs*/
ul.domtabs {float: left; margin: 0; padding: 0;}

ul.domtabs li {
background: #999;
float: left;
list-style: none;
margin: 0 2px 0 0;
padding: 2px 3px;
text-align: center;
}

ul.domtabs li:hover, ul.domtabs li.active {background: #CCC;}
  ul.domtabs li a {color: #333; font-weight: bold; text-decoration: none;}

/*tabs containers*/
div.domtab div.tab-container {
border: 3px solid #ccc;
clear: both;
display: block;
padding: 10px;
}

Colors

We can, of course, change the following colors, based on our needs. :D

#CCC — Used as background when the tabs are hovered and/or active, and as the border color for the containers.
#999 — Used as the default tab background color.
#333 — Used as the default tab text color.

Widths

DO keep in mind that if the tabs appear on top of each other, it’s probably due to the width of the sidebar, or container, since the individual tabs do NOT have a fixed width. In this example, three tabs fit perfectly in a 220px-wide sidebar, but we can’t, for example, expect six tabs to appear in the same line.

Usage

General explanation

This script requires the following to work properly. A main container which will contain (a) a list with the tabs, and (b) a container for each tab, where the content will obviously be displayed.

<div class='domtab'>

<ul class='domtabs'>
  <li><a href='#tab1'>TAB 1</a></li>
  <li><a href='#tab2'>TAB 2</a></li>

  <li><a href='#tab3'>TAB 3</a></li>
</ul>

<div class='tab-container'>
  <a id='tab1' name='tab1'></a>

Content for TAB 1.
</div>

<div class='tab-container'>
  <a id='tab2' name='tab2'></a>
Content for TAB 2.
</div>

<div class='tab-container'>
  <a id='tab3' name='tab4'></a>
Content for TAB 3.
</div>

</div>

1. The main container (<div>) should have the class domtab.
2. The list (<ul>) with the tabs should have the class domtabs, and each link (<a>) in the list should point to the ID of each tab container.
3. Each container should have the class tab-container and an identifier (anchor) inside of it, with a unique name and ID.

Recent Posts, Labels and Archives Widget

Based on the explanation above, the things we must change to make this widget work are basically the unique IDs and the content for each tab (which, in this case, will be replaced by Blogger sections and widgets).

1. Look for the following line:

<b:section class='sidebar' id='sidebar' preferred='yes'>

2. Right before it, paste the code below:

<div class='domtab'>

<ul class='domtabs'>
  <li><a href='#recent'>Recent</a></li>
  <li><a href='#cat'>Categories</a></li>

  <li><a href='#arc'>Archives</a></li>
</ul>

<div class='tab-container'>
  <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:section>
</div>

<div class='tab-container'>
  <a id='cat' name='cat'></a>

  <b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
    <b:widget id='Label99' locked='false' title='' type='Label'/>
  </b:section>
</div>

<div class='tab-container'>
  <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:section>
</div>

</div>

3. Save your template.

4. Go to the Elements Page. Once there, you should see something like this:

Tabs Widget

Edit the Feed widget with your Feed URL, and you’re done.

Feed Widget

Note: If you can’t edit this widget, feel free to delete it and add it again from there.

Demo

You can take a look at the result right here.

Reported Bug

Unfortunately, this script makes the post area disappear when a post’s comment link is accessed (i.e. http://blog.blogspot.com/2001/01/post.html#comments). The only solution I can come up with is changing the comment link for the post link. That way, the post and the comments will be displayed normally.

To do this, from your HTML Editor, after expanding the widget templates, look for the following code:

data:post.addCommentUrl

You will get two results. Change them for:

data:post.url

And you’ll be done.

More in this category: