If you use Blogger (blogspot.com) and have a lot of widgets, it would be wise to use a tabbed menu (navigation) like the one you can see on our website, in the right. It's easy to create such a menu. Here is how to do it:1. Make a backup of your old layout: Blogger Dashboard > Layout > Edit HTML: "Download Full Template".
2. In the "Edit HTML", search for ]]> and ABOVE it, paste the following code:
#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;
}You can of course play with the above values to modify the look and fill as you want (colors, size, margins, etc).
3. Copy the following code AFTER ]]> :
<script src='http://holytrinityde.googlepages.com/tabber.js' type='text/javascript'/>4. Copy the following code where your sidebar begins, usually it's something like: <div id='sidebar'>, so search for this or something similar in your theme and under it, paste 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>You can change their type from HTML to RSS or whatever you need. You can then start adding something in each tab of your new tabbed navigation, as if they were 3 different widgets (Layout > Page elements):
5. Click on 1, 2 and 3 and on each one, click on "Edit Widget" and paste some code with what you would like to be in each tab (top post, recent comments, recent posts, labels, a tag cloud, etc.).
Original idea (but modified by me), from eu-simplu
