How to make Tabbed Sidebar Navigation (Menu) for Blogger

So in this tutorial I will explain how to use for tabbed navigation in Blogger like Recent posts widget, Top posts widget, Blogger archive etc. You can put any kind of widget.

What ever you going to do Back-up Your Template! Highly recommend.

How to: Blogger Tabbed Navigation (Menu)

1. Go to your Blogger Dashboard > Layout > Edit HTML

2. And paste the following code just before ]]></b:skin>

#tabsidebar-wrapper{
width: 353px;
/* This will manage the width of the tab content. Usually this be smae as your sidebar*/
float: left;
margin: 0px 0px 0px 6px;
border: 1px none #ECECEC;
}
.tabberlive .tabbertabhide {
display:none;
}
.tabber {display:none;}
/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabberlive {
margin-top:1em;
}

/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding: 3px 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}

ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #307396;
text-decoration: none;
font-size : 17px;
font-weight: normal;
}

ul.tabbernav li a:link { color: #FFFFFF; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
color: #000;
background: #3D99C8;
border-color: #227;
}

ul.tabbernav li.tabberactive a
{
color: #BF0000;
background-color: #fff;
border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
color: #000;
background: white;
border-bottom: 1px solid white;
}

/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
border:1px solid #778;
border-top:0;
background: #fff;
/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */

/* height:200px; */

/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */

/* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

3. Now copy the following code after ]]>

<script src='http://holytrinityde.googlepages.com/tabber.js' type='text/javascript'/>

4. Paste the following code where your sidebar begins, it's something like: <div id="sidebar"> Under this

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' preferred='yes' showaddelement='yes'>
<b:widget id='HTML19' locked='false' title='Recent Posts' type='HTML'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' preferred='yes' showaddelement='yes'>
<b:widget id='HTML21' locked='false' title='Top Posts' type='HTML'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' preferred='yes' showaddelement='yes'>
<b:widget id='HTML20' locked='false' title='Tag Cloud' type='HTML'/>
</b:section>
</div>
</div>
</div>

5. Now you can see 1, 2, 3 in blogger page layouts window. Press 1 and add widget same as 2 and 3...

Credit