Create Tabbed Navigation in Blogger | How To

Tabbed Navigation menu in blogger provides much more things in less screen area. It is very usefull in many ways you can also use it just like I've used it on my site. I've used Javascript Tabifier to explain the use of Tabbed Navigation in your Blog. You can check out the Javascript Tabifier homepage at Barelyfitz. An Example of Tabbed Navigation is given at Tabber Example Page.
To add a menu like the one shown below-

Just follow the steps Explained-

1. Go to your blog's Edit HTML page by clicking on Layout.
2. Expand your widgets template.
3. Go on pasting following codes as specified
   
   
   
   
   
   • Copy and Paste the following code above ]]> by searching for ]]> as done in previous post.
     #tabsidebar-wrapper{
width: 353px;
/* This will manage the width of the tab content. Usually this be same 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;
}
   • Now Paste following code just after ]]>
     <script src='http://gohitech.googlecode.com/files/tabber.js' type='text/javascript'/>
   • Now search for code where Sidebar begins. It usually begins with <div id='sidebar'>. Paste following after it
     <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='HTML31' 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='HTML30' 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='HTML29' locked='false' title='Tag Cloud' type='HTML'/>
</b:section>
</div>
</div>
</div>
4. Now go to Edit HTML => Page Elements. There you will get some thing like shown below
   
   
   
5. Just go on adding content by clicking on different tabs. The other way to do this is also given at Bloganol.com
   

Links: Download PDF of this post | Get Blogging Tricks