The Top 3 Multi Tab Widgets for Blogger I

Sometimes you want to have certain widgets in your blog sidebar but you might not need the to show all the time. You can "hide" them in tabs, saving precious screen real estate. Here's how to do that.

BF-js-tabifier

The simplest solution belongs to BarelyFitz Designs.

1) BarelyFitz tabifier

Here’s how they present it:

Converts your HTML into a dynamic tabbed interface.
Does not require you to set up a list of links, or anchors for the tabs.
Plug and play: no need to know JavaScript, just make a few simple changes to your HTML.
Use CSS to customize the appearance of the tabs.
Gracefully degrades if JavaScript is not present and allows a different set of styles to be applied when JavaScript is not present.
Gracefully supports printing (try a print preview on the example.html page) and allows a different set of styles to be applied when printing.
Multiple tab sets on a page - you can even nest one tab set within another.
Set the initial tab to be displayed.
Use javascript to control which tab is displayed.
Define onLoad and onClick callback functions to perform more advanced functions, such as loading the tab content dynamically using AJAX.
Use a cookie to remember which tab was selected so it remains selected when you return to the page.
Object-oriented, extensively-commented code.
MIT license so you can modify and use in commercial projects.

Here are the steps you need to take to use it:

1. Add the following styles to your template, before </b:skin>:

/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{
width: 375px; /* Mesma largura da Sidebar */
float: right;
border: 1px none #CCC;
margin-bottom: 15px;
}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:2px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em;
margin-right:2px;
border: 1px solid #CCC;
border-bottom: none;
background: #fff;
text-decoration: none;
}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#369; background: #e6e6e6; border-color: #CCC;}
ul.tabbernav li.tabberactive a{
background-color: #e6e6e6;
color: #369;
border-bottom: 1px solid #e6e6e6;
}
ul.tabbernav li.tabberactive a:hover{
color: #369;
background: #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
.tabberlive .tabbertab {
background: #e6e6e6;
padding:5px;
border:1px solid #ccc;
border-top:0;
}

.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

2a. Download the tabber.js file from mdn.fm, host it, then replace below with your URL and place this line before </head>:

<script src='http://www.your-url.com/scripts/tabber.js' type='text/javascript'/>

2b. Alternatively, instead of the line above copy the whole script into your template:

/*==================================================
$Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
tabber.js by Patrick Fitzgerald pat@barelyfitz.com

Documentation can be found at the following URL:
http://www.barelyfitz.com/projects/tabber/

License (http://www.opensource.org/licenses/mit-license.php)

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation files
(the "Software"), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell copies of the Software,
and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
==================================================*/

function tabberObj(argsObj)
{
var arg; /* name of an argument to override */

/* Element for the main tabber div. If you supply this in argsObj,
then the init() method will be called.
*/
this.div = null;

/* Class of the main tabber div */
this.classMain = "tabber";

/* Rename classMain to classMainLive after tabifying
(so a different style can be applied)
*/
this.classMainLive = "tabberlive";

/* Class of each DIV that contains a tab */
this.classTab = "tabbertab";

/* Class to indicate which tab should be active on startup */
this.classTabDefault = "tabbertabdefault";

/* Class for the navigation UL */
this.classNav = "tabbernav";

/* When a tab is to be hidden, instead of setting display='none', we
     set the class of the div to classTabHide. In your screen
     stylesheet you should set classTabHide to display:none. In your
     print stylesheet you should set display:block to ensure that all
     the information is printed.
*/
this.classTabHide = "tabbertabhide";

/* Class to set the navigation LI when the tab is active, so you can
use a different style on the active tab.
*/
this.classNavActive = "tabberactive";

/* Elements that might contain the title for the tab, only used if a
title is not specified in the TITLE attribute of DIV classTab.
*/
this.titleElements = ['h2','h3','h4','h5','h6'];

/* Should we strip out the HTML from the innerHTML of the title elements?
This should usually be true.
*/
this.titleElementsStripHTML = true;

/* If the user specified the tab names using a TITLE attribute on
     the DIV, then the browser will display a tooltip whenever the
     mouse is over the DIV. To prevent this tooltip, we can remove the
     TITLE attribute after getting the tab name.
*/
this.removeTitle = true;

/* If you want to add an id to each link set this to true */
this.addLinkId = false;

/* If addIds==true, then you can set a format for the ids.
     <tabberid> will be replaced with the id of the main tabber div.
     <tabnumberzero> will be replaced with the tab number
       (tab numbers starting at zero)
     <tabnumberone> will be replaced with the tab number
       (tab numbers starting at one)
     <tabtitle> will be replaced by the tab title
       (with all non-alphanumeric characters removed)
   */
this.linkIdFormat = '<tabberid>nav<tabnumberone>';

/* You can override the defaults listed above by passing in an object:
var mytab = new tabber({property:value,property:value});
*/
for (arg in argsObj) { this[arg] = argsObj[arg]; }

/* Create regular expressions for the class names; Note: if you
change the class names after a new object is created you must
also change these regular expressions.
*/
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');

/* Array of objects holding info about each tab */
this.tabs = new Array();

/* If the main tabber div was specified, call init() now */
if (this.div) {

this.init(this.div);

    /* We don't need the main div anymore, and to prevent a memory leak
       in IE, we must remove the circular reference between the div
       and the tabber object. */
    this.div = null;
}
}

/*--------------------------------------------------
Methods for tabberObj
--------------------------------------------------*/

tabberObj.prototype.init = function(e)
{
/* Set up the tabber interface.

e = element (the main containing div)

     Example:
     init(document.getElementById('mytabberdiv'))
   */

var
childNodes, /* child nodes of the tabber div */
i, i2, /* loop indices */
t, /* object to store info about a single tab */
defaultTab=0, /* which tab to select by default */
DOM_ul, /* tabbernav list */
DOM_li, /* tabbernav list item */
DOM_a, /* tabbernav link */
aId, /* A unique id for DOM_a */
headingElement; /* searching for text to use in the tab */

/* Verify that the browser supports DOM scripting */
if (!document.getElementsByTagName) { return false; }

/* If the main DIV has an ID then save it. */
if (e.id) {
this.id = e.id;
}

/* Clear the tabs array (but it should normally be empty) */
this.tabs.length = 0;

/* Loop through an array of all the child nodes within our tabber element. */
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {

    /* Find the nodes where class="tabbertab" */
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      /* Create a new object to save info about this tab */
      t = new Object();
      /* Save a pointer to the div for this tab */
      t.div = childNodes[i];
      /* Add the new object to the array of tabs */
      this.tabs[this.tabs.length] = t;

      /* If the class name contains classTabDefault,
     then select this tab by default.
      */
      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
}

/* Create a new UL list to hold the tab headings */
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
/* Loop through each tab we found */
for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];

    /* Get the label to use for this tab:
       From the title attribute on the DIV,
       Or from one of the this.titleElements[] elements,
       Or use an automatically generated number.
     */
    t.headingText = t.div.title;

/* Remove the title attribute to prevent a tooltip from appearing */
if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {

      /* Title was not defined in the title of the DIV,
     So try to get the title from an element within the DIV.
     Go through the list of elements in this.titleElements
     (typically heading elements ['h2','h3','h4'])
      */
      for (i2=0; i2<this.titleElements.length; i2++) {
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) {
      t.headingText = headingElement.innerHTML;
      if (this.titleElementsStripHTML) {
        t.headingText.replace(/<br>/gi," ");
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");
      }
      break;
    }
      }
    }

    if (!t.headingText) {
      /* Title was not found (or is blank) so automatically generate a
         number for the tab.
      */
      t.headingText = i + 1;
    }

/* Create a list element for the tab */
DOM_li = document.createElement("li");

    /* Save a reference to this list item so we can later change it to
       the "active" class */
    t.li = DOM_li;

    /* Create a link to activate the tab */
    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;

    /* Add some properties to the link so we can identify which tab
       was clicked. Later the navClick method will need this.
    */
    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;

/* Do we need to add an id to DOM_a? */
if (this.addLinkId && this.linkIdFormat) {

      /* Determine the id name */
      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}

/* Add the link to the list element */
DOM_li.appendChild(DOM_a);

/* Add the list element to the list */
DOM_ul.appendChild(DOM_li);
}

/* Add the UL list to the beginning of the tabber div */
e.insertBefore(DOM_ul, e.firstChild);

/* Make the tabber div "live" so different CSS can be applied */
e.className = e.className.replace(this.REclassMain, this.classMainLive);

/* Activate the default tab, and do not call the onclick handler */
this.tabShow(defaultTab);

/* If the user specified an onLoad function, call it now. */
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};

tabberObj.prototype.navClick = function(event)
{
/* This method should only be called by the onClick event of an <A>
     element, in which case we will determine which tab was clicked by
     examining a property that we previously attached to the <A>
     element.

     Since this was triggered from an onClick event, the variable
     "this" refers to the <A> element that triggered the onClick
     event (and not to the tabberObj).

     When tabberObj was initialized, we added some extra properties
     to the <A> element, for the purpose of retrieving them now. Get
     the tabberObj object, plus the tab number that was clicked.
*/

var
rVal, /* Return value from the user onclick function */
a, /* element that triggered the onclick event */
self, /* the tabber object */
tabberIndex, /* index of the tab that triggered the event */
onClickArgs; /* args to send the onclick function */

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;

/* Remove focus from the link because it looks ugly.
I don't know if this is a good idea...
*/
a.blur();

/* If the user specified an onClick function, call it now.
If the function returns false then do not continue.
*/
if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};

tabberObj.prototype.tabHideAll = function()
{
var i; /* counter */

/* Hide all tabs and make all navigation links inactive */
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

/* Hide a single tab and make its navigation link inactive */
div = this.tabs[tabberIndex].div;

/* Hide the tab contents by adding classTabHide to the div */
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{
/* Show the tabberIndex tab and hide all the other tabs */

var div;

if (!this.tabs[tabberIndex]) { return false; }

/* Hide all the tabs first */
this.tabHideAll();

/* Get the div that holds this tab */
div = this.tabs[tabberIndex].div;

/* Remove classTabHide from the div */
div.className = div.className.replace(this.REclassTabHide, '');

/* Mark this tab navigation link as "active" */
this.navSetActive(tabberIndex);

/* If the user specified an onTabDisplay function, call it now. */
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{
/* Note: this method does *not* enforce the rule
that only one nav item can be active at a time.
*/

/* Set classNavActive for the navigation list item */
this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{
/* Note: this method does *not* enforce the rule
that one nav should always be active.
*/

/* Remove classNavActive from the navigation list item */
this.tabs[tabberIndex].li.className = '';

return this;
};

/*==================================================*/

function tabberAutomatic(tabberArgs)
{
/* This function finds all DIV elements in the document where
class=tabber.classMain, then converts them to use the tabber
interface.

     tabberArgs = an object to send to "new tabber()"
*/
var
    tempObj, /* Temporary tabber object */
    divs, /* Array of all divs on the page */
    i; /* Loop index */

if (!tabberArgs) { tabberArgs = {}; }

/* Create a tabber object so we can get the value of classMain */
tempObj = new tabberObj(tabberArgs);

/* Find all DIV elements in the document that have class=tabber */

/* First get an array of all DIV elements and loop through them */
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
    /* Is this DIV the correct class? */
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      /* Now tabify the DIV */
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
}
return this;
}

/*==================================================*/

function tabberAutomaticOnLoad(tabberArgs)
{
/* This function adds tabberAutomatic to the window.onload event,
so it will run after the document has finished loading.
*/
var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

/* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
    window.onload = function() {
      tabberAutomatic(tabberArgs);
    };
} else {
    window.onload = function() {
      oldOnLoad();
      tabberAutomatic(tabberArgs);
    };
}
}

/*==================================================*/

/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>

3. Finally, enter the following code so that the tabber is visible, below <div id=’sidebar-wrapper’>

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div>

2) Bloganol 5-in-one

Different than above, the following 5-tab solution has all the modification embedded (no modification of the template). To use it, copy and paste the following code into a “HTML/JavaScript widget”:

<!– widget by Bloganol.blogspot.com –>
<script language=”JavaScript” type=”text/javascript”>
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById(‘tt’+i);
tr = document.getElementById(‘dd’+i);
ta = document.getElementById(‘aa’+i);
if(t==i){
if(t==1) ts.className=”Tab1″;
if(t==2) ts.className=”Tab2″;
if(t==3) ts.className=”Tab3″;
if(t==4) ts.className=”Tab4″;
if(t==5) ts.className=”Tab5″;
ta.className=”srchlinksel2″;
ts.style.borderBottom=”1px solid #FFFFFF”;
tr.style["display"]=”block”;
tr.style["visibility"]=”visible”;
}
else{
ts.className=”tb2″;
ta.className=”srchlink2″;
ts.style.borderBottom=”1px solid #B5D6EF”;
tr.style["display"]=”none”;
tr.style["visibility"]=”hidden”;
}
}
}
</script>

<!– CSS Begin //–>

<!– widget by Bloganol.blogspot.com –>

<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td align=”middle” onclick=”st2(’1′)” height=”22″ id=”tt1″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid” width=”70″
class=”Tab1″><a id=”aa1″
class=”srchlinksel2″ href=”javascript:undefined”><font
class=”f12″><b>TAB1</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(’2′)” height=”22″ id=”tt2″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”47″
class=”tb2″><a id=”aa2″
class=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>TAB2</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(’3′)” height=”22″ id=”tt3″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”62″
class=”tb2″><a id=”aa3″
class=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>Tab3</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(’4′)” height=”22″ id=”tt4″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”48″
class=”tb2″><a id=”aa4″
class
=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>Tab4</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(’5′)” height=”22″ id=”tt5″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”52″
class=”tb2″><a id=”aa5″
class=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>Tab5</b></font></a></td></tr>
<tr>
<td colspan=”9″>
<div style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px;
BORDER-BOTTOM: 0px”
><!– Main Headlines Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″ height=”5″>
<tbody>
<tr>
<td height=”5″></td></tr></tbody></table>
   <font color=”#797979″ class=”f10″
>
<!– wmlheadline begin –>
<!– TDate Begin –>
<!– Date Begin –>
Browse Items</font>
<!– Date End –>
<!– TDate End –>
<div id=”dd1″ style=”BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>Tab 1
Content</font></td>
</tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table></div><!– Main
Headlines End //–></div>
<div id=”dd2″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– News Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>Tab 2
Content</font></td></tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table><!– News End
//–></div>
<div id=”dd3″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– Business Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>Tab 3
Content</font></td></tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table><!– Business End
//–></div>
<div id=”dd4″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– Movies Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>Tab 4
Content</font></td>
</tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table><!– Movies End
//–></div>
<div id=”dd5″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– Sports Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>Tab 5
Content</font></td></tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td
height=”4″></td></tr></tbody></table>

<!– Widget Code Ends Here –>

Make sure you change <b>Tabn</b> to an appropriate title for each tab and Tab n Content with the content you want to see in each tab, where n takes values from 1 to 5.

3) From Russia with PHP Lyubinskiy

This is quite similar to our first example.

1. Paste the following styles before </b:skin>:

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu - Tab Buttons*/
text-align: center;
height: 24px; /* Height top main menu - Tab Buttons*/
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #F4F4F4; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FBF1A4; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

2a. Download the Tabview script from the link below (tabview-dl), host it, then add the following line above </head>:

<script src=’<your URL>tabview.js' type='text/javascript'/>

2b. Alternatively, as in our first example, you might want to paste the script into your template:

function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display = (i == id) ? 'block' : 'none';
    }
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

//]]>
</script>

3. To use it, paste the following into a widget and change as you wish:

<div class="Page">
<div class="Pad">
Content 1.1 <br />
Content 1.2 <br />
Content 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Content 2.1 <br />
Content 2.2 <br />
Content 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Content 3.1 <br />
Content 3.2 <br />
Content 3.3 <br />
</div>
</div>

</div>
</div>
</form>

If these simple solutions do not satisfy you, consider one based on jquery, as presented in our second episode.

Sources / More info: tabber-js, js-tabifier, bf-zip, bn-script, bn-5-tab, php-dev, tabview-dl

Blog Idol, scrits, jquery, tab, tabbed, sidebar, widget, widgets

1 comment:

InBonoboSeptember 8, 2012 at 10:03 PM
Peter, there are 3 different solutions presented here. Which one are you referring to?

Thank you for commenting and rest assured that any and all comments are welcome, whether positive or negative, constructive or distructive. Unfortunately, if you comment in this view I might not know about - please use the regular (Desktop) view.
I am using Disqus for commenting, but Blogger is not showing it so your comments may end up not being displayed - tell Google about it!