Here is another reader query that I would like to answer to all my readers. Ken Savage asked this question about what script I use to get the tabs in the sidebar?
The actual reason I started using tabs was because since I changed to using a two column theme I wanted to get a lot of information in the sidebar but it could not be done in a normal way as that would lead to a very long page which would leave the main content area empty beyond a point.
My idea was to get a more compact look to the site which fitted in as much information as possible in as little space I could use, that is the reason I started using tabs.
Lets see how exactly you can add tabs to your own web site.
What Is The Script Being Used For Creating Tabs?
Lets have a look at some tips on adding tabs to your website, it is very simple and I will try and simplify it further more so that it becomes easier for users to implement on their sites. Lets look at the steps to add tabs to your site.
..... Other header codes ....
<!-- ADD THE TABBER FILES BETWEEN THE HEAD TAGS -->
<link rel="stylesheet" href="http://techie-buzz.com/wp-content/themes/techie-buzz-2/js/tabber.css" type="text/css" media="screen" />
Second Step: Add the Main Container to hold the Tabs
To start of with we need to use layers to group our content together, the main layer has to have a class called tabber. This will be the main container which will hold all the tabs.
<!-- This is main container for holding tabbed content -->
Third Step: Add the Tabs to the Container
Now that we have the main container ready with the above code, lets see how we can add child tabs to the container. To add tabs you will need to create another layer with a class tabbertab. Lets have a look at the code example.
<!-- Start main container -->
<!-- Start the first tab -->
<h2>Tab Title Goes Here</h2> <!-- This is the header of the tab -->
<!-- Start Content for the tab -->
This are some content I want in the tab
<li>I can also use</li>
<p>Or anything else</p>
<!-- End tab content -->
<!-- End the first tab -->
<!-- End main container -->
As we see in the above code now we have added the tab with a class tabbertab, the title of the tab has to be given inside the <h2></h2> tags. You can have any content after the title as part of the tab.
If you want to add more than one tab, you just need to create another layer with the class tabbertab. You can add as many tabs you want to within a container.
What if I don’t want something other than the first tab as default?
If you look at the sidebar on this blog, In the tab Recent Comments and Top Commentators the Top Commentators tab is default even though it is second, it is easy to do this. Here is the sample code I use to do this.
In the above code
Tab 1 Content
<div class="tabbertab tabbertabdefault">
Tab 2 Content
You can use the tabbertabdefault on any of the tabs you have to set it as default tab. Also here is the code I use to group Recent Posts, Popular Posts and Categories as tabs.
Before ending I would like to say that you have to use the exact class names for CSS as given in this tutorial as it is set inside the tabber CSS. You can of course change the color of the tabs by editing the CSS and choosing the appropriate color you want to use.
So what are you waiting for go ahead and tabify your blog or web site and provide more information compactly without making a mess out of your templates. If you need any help in tabifying your blog please contact me and I would be glad to help.
How did you like this tutorial, will it be helpful to you? Do let me know through your valuable comments. If you have any questions feel free to contact me and will try our best to help you out.