How to create a fully widgetized tabbed content box on blogger

In this tutorial you will learn how to add a tabbed content box on your blogger blog using CSS, XHTML and Javascript in 4 simple steps it will also be fully widgetized so you can easy change colours and rearrange the widgets within your dashboard here's a simple screenshot of what we are going to create in this tutorial.

.

Note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure if yours is disabled or not check the demo you should see a working tabbed box.


If you have any questions about this tutorial feel free to ask in the comments so I recommend you use a test blog for this tutorial using the minima template or backup your template before attempting this as i cannot be held resposible if you mess up your template.

Now let me point out that I'm no Javascript expert I'm still learning so i did a little research around the internet and found a great script which does most of the work for us you can read more about it and download the script from this link look for the javascript file named tabber.js this is the script that we are going to use in this tutorial.

Now go to layout > edit html and paste the following code just before the closing </head> tag making sure you replace the red comment with the full contents of the tabber script you downloaded by opening it with a simple text editor.

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
/* paste the full contents of your tabber script here */
//]]>
</script>

next find the <div id='sidebar-wrapper'> just below there add the following code

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
</div>
in the code above we have added 3 tabs if you would like more tabs it's just a matter of copying one of the sections and pasting it below the other making sure you change the id to tab4 and so on since section IDs must be unique.

Now we need to add some CSS code for the structure and style of the tabs so copy the following CSS code and paste it in your template just before the body CSS code

/* start tab styles */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}

.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/* end tab styles */

in the CSS code above i have declared 4 variables named tbbxbgcolor, tbbxbrcolor, tbbxcolor1 and tbbxcolor2 so we can easy change colours of the tabbed content box from within the fonts and colours tab the width of the tabbed box will span to whatever width your #sidebar-wrapper is set to if you know CSS you could hard code the hex colour codes and tweak things further to your liking.

So now we add the final code to define the variables we just declared so copy the following code and paste it at the top of your template with the rest of the variable definitions

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">
now save your template and go to the page element tab you should see something like the screenshot below.



add a widget in the tabbed section then click the numbers to change tabs so you can add more widgets in the sections do not forget to save your template before viewing your blog to change colours of the tabs go to the fonts and colours tab you should see something like the following screenshot below.



Now you should have a fully widgetized tabbed content box i hope you enjoyed this tutorial comments are welcome see my result