| |

How to add a Tabbed Interface to your Blog

You must have seen the tabbed interface on several professional blogs. The same is also present on this blog in the sidebar to the right.

In fact, I’ve had this running on this blog as well as my personal blog for a long time now, where I displayed post details.

Would you like to run this on your blog? Well, here’s how you can do that.

One highly popular JavaScript that is used for this is called Tabber.

Features

  • Converts your HTML into a dynamic tabbed interface.
  • Does not require you to set up a list of links, or anchors for the tabs.
  • Plug and play: no need to know JavaScript, just make a few simple changes to your HTML.
  • Use CSS to customize the appearance of the tabs.
  • Gracefully degrades if JavaScript is not present and allows a different set of styles to be applied when JavaScript is not present.
  • Gracefully supports printing (try a print preview on the example.html page) and allows a different set of styles to be applied when printing.
  • Multiple tab sets on a page – you can even nest one tab set within another.
  • Set the initial tab to be displayed.
  • Use javascript to control which tab is displayed.
  • Define onLoad and onClick callback functions to perform more advanced functions, such as loading the tab content dynamically using AJAX.
  • Use a cookie to remember which tab was selected so it remains selected when you return to the page.
  • Object-oriented, extensively-commented code.
  • MIT license so you can modify and use in commercial projects.

Implementation

Implementing Tabber on your website or blog is extremely simple. You just need basic HTML knowledge.

Start off by adding the following code in the between the <head> and </head> section of your page.

<script type="text/javascript">
	var tabberOptions = {manualStartup:true};
</script>
<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="tabber.css" type="text/css" media="screen" />

The script above includes the tabber.js file. We also disable automatic startup.

Just before the </body> tag, add the following code. The code will cause tabber to run.

<script type="text/javascript">
tabberAutomatic(tabberOptions);
</script>

The following HTML code will generate the necessary tabbed interface.

<div class="tabber">
  <div class="tabbertab">
    <h3>Section One</h3>
    Section one content.
  </div>
  <div class="tabbertab" title="MyTabTitle">
    Section two content.
  </div>
</div>

You have two ways of creating the titles of the tabs as the code shows above. The first is using the <h3> tag. The second is to use the title attribute for the div. I prefer using the <h3> tag as it makes the text better formatted in case the your website visitor doesn’t have JavaScript enabled.

Setting the class="tabbertab" for the div will create a new tab when tabber activates.

The best part about tabber is that you can create as many tabbed interfaces on your blog as you need.

There are several advanced uses of Tabber. However, for creating simple tabbed interfaces, this is all you need 🙂

You can however cover one more step of customizing the look of your tabbed interface by editing the included CSS file (simply rename example.css to tabber.css.

Do you have tabber implemented on your blog? Or do you use any other script for the same?

4 Comments

  1. Hi Ajay 🙂
    i am also using this theme , so i would like to know , where shall i add those codes , i meant to say in which .php file??

    Thanks for guide 🙂 🙂 🙂

  2. can u explain me how to put in my blogger template…i’m new to bloging could u help me with this tabber

Leave a Reply to aryan Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.