How to Add Tabs to Sidebar in Blogger

By Raju on Jan 8, 2010

In this tutorial I will tell you how to add tabs to sidebar of Blogger. There are many tutorials available out there but they are mostly complicated and not so easy to add. With the effect of jQuery, this widget lets you add any sidebar gadget you want to be included within the tabs. It is the easiest tabbed widget that will let you create your tabs for blogger.

Demo

First, go to Design > Edit HTML and backup your template.
Second is the CSS part. Place the below codes before ]]></b:skin>

.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;
}
ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

In third part, you have to include the jQuery Library. Add the following script just after]]></b:skin>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>

If you had previously added the jQuery library, then skip this part but remember to check if it's thelatest or not.
In fourth part, you need the script which will automatically create tabs to sidebar. Add this script before </head> tag.

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
</script>
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>

You have to change the following codes to let the widget work:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

Explanation:

starttab - Starting number of the gadget to start the tab, it counts from ‘0’. (step 4.1)
endtab - The number for your last gadget where the tab ends. (step 4.2)
sidebarname - Your sidebar’s id that you have found out. (step 4.3)

Step 4.1 and 4.2

To place the first three gadgets within the tab, your starting number is 0 and the ending number is 2. Or if you want to start the tab from the second sidebar gadget then the starting number is 1 and the ending number is 3 and so on.Let’s have a look at the pictures below for better understanding.
Understanding Tab Numbers

Step 4.3

Now comes the main part for finding the correct sidebar’s id. In most of the templates you can find the id of your sidebar by searching for “sidebar-wrapper” in Design > Edit HTML tab. For example, the id for Layout templates is “sidebar” and it's common for this type of templates.

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

For the new designer templates from Blogger the snippet will be:

<div class='sidebar section' id='sidebar-right-1'>

You can also install a Firefox plugin called Firebug to find the correct ID, a great tool for Web Developers.
Find Sidebar Id

Lastly, save you template.
Now all you have to do is rearrange the gadgets and select the stating tab and the ending tabs. As I have told earlier, this is the easiest widget to add tabs to sidebar.

To be Noted:

You must add titles to every sidebar gadget to let this tab widget for Blogger to work properly.
Thanks to Abu Farhan and Dante Araujo of Blogger Tuts.

Jiwa PATRIOTIK