Advanced Multi Tabbed Widget For Blogger – Fully Widgetized!

• Share This Post
• Twitter
• Facebook
• Digg
• StumbleUpon
• Delicious
• Reddit
• Feed RSS

I had published a post on how to add a multi tab widget to your blogger blogs and how to customize it to suit your blog layout some months ago. The only problem with that widget is that it is not fully widgetized i.e you can not add archives, labels, author profile or other blogger official widgets to it unless you have their separate code with you. I just came across a beautiful and a more flexible and advanced tabber widget stylized by Lawny Designs and scripted by Barelyfitz. I have modified lawny’s tutorial and have made some changes to the code so to make it even more simpler to newbie bloggers. You can view this widget hanging on my sidebar.

To add this cute multi tab widget to your BlogSpot blogs follow these steps :

Steps to Follow

• Step 1

Go to Blogger > Layout > Edit HTML

• Step 2

Search For

</head>

• Step 3

Paste the code below just above it :

<---- www.hackwithstyle.com Multi Tab code starts here ----->
<script type='text/javascript'>
//<![CDATA[
document.writeundefined'<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObjundefinedargsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for undefinedarg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExpundefined'\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExpundefined'\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExpundefined'\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExpundefined'\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExpundefined'\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Arrayundefined);
if undefinedthis.div) {
this.initundefinedthis.div);
this.div = null;
}
}


tabberObj.prototype.init = functionundefinede)
{


var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if undefined!document.getElementsByTagName) { return false; }
if undefinede.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
forundefinedi=0; i < childNodes.length; i++) {
ifundefinedchildNodes[i].className &&
childNodes[i].className.matchundefinedthis.REclassTab)) {
t = new Objectundefined);
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;


if undefinedchildNodes[i].className.matchundefinedthis.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElementundefined"ul");
DOM_ul.className = this.classNav;
for undefinedi=0; i < this.tabs.length; i++) {


t = this.tabs[i];


t.headingText = t.div.title;


if undefinedthis.removeTitle) { t.div.title = ''; }


if undefined!t.headingText) {


for undefinedi2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagNameundefinedthis.titleElements[i2])[0];
if undefinedheadingElement) {
t.headingText = headingElement.innerHTML;
if undefinedthis.titleElementsStripHTML) {
t.headingText.replaceundefined/<br>/gi," ");
t.headingText = t.headingText.replaceundefined/<[^>]+>/g,"");
}
break;
}
}
}


if undefined!t.headingText) {
t.headingText = i + 1;
}


DOM_li = document.createElementundefined"li");


t.li = DOM_li;


DOM_a = document.createElementundefined"a");
DOM_a.appendChildundefineddocument.createTextNodeundefinedt.headingText));
DOM_a.href = "javascript:voidundefinednull);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;


DOM_a.tabber = this;
DOM_a.tabberIndex = i;


if undefinedthis.addLinkId && this.linkIdFormat) {


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


DOM_a.id = aId;
}


DOM_li.appendChildundefinedDOM_a);


DOM_ul.appendChildundefinedDOM_li);
}


e.insertBeforeundefinedDOM_ul, e.firstChild);


e.className = e.className.replaceundefinedthis.REclassMain, this.classMainLive);


this.tabShowundefineddefaultTab);


if undefinedtypeof this.onLoad == 'function') {
this.onLoadundefined{tabber:this});
}


return this;
};


tabberObj.prototype.navClick = functionundefinedevent)
{


var
rVal,
a,
self,
tabberIndex,
onClickArgs;


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


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


a.blurundefined);


if undefinedtypeof self.onClick == 'function') {


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


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


rVal = self.onClickundefinedonClickArgs);
if undefinedrVal === false) { return false; }
}


self.tabShowundefinedtabberIndex);


return false;
};


tabberObj.prototype.tabHideAll = functionundefined)
{
var i;


for undefinedi = 0; i < this.tabs.length; i++) {
this.tabHideundefinedi);
}
};


tabberObj.prototype.tabHide = functionundefinedtabberIndex)
{
var div;


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


div = this.tabs[tabberIndex].div;


if undefined!div.className.matchundefinedthis.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActiveundefinedtabberIndex);


return this;
};


tabberObj.prototype.tabShow = functionundefinedtabberIndex)
{


var div;


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


this.tabHideAllundefined);


div = this.tabs[tabberIndex].div;


div.className = div.className.replaceundefinedthis.REclassTabHide, '');


this.navSetActiveundefinedtabberIndex);


if undefinedtypeof this.onTabDisplay == 'function') {
this.onTabDisplayundefined{'tabber':this, 'index':tabberIndex});
}


return this;
};


tabberObj.prototype.navSetActive = functionundefinedtabberIndex)
{


this.tabs[tabberIndex].li.className = this.classNavActive;


return this;
};


tabberObj.prototype.navClearActive = functionundefinedtabberIndex)
{


this.tabs[tabberIndex].li.className = '';


return this;
};


function tabberAutomaticundefinedtabberArgs)
{
var
tempObj,
divs,
i;


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


tempObj = new tabberObjundefinedtabberArgs);


divs = document.getElementsByTagNameundefined"div");
for undefinedi=0; i < divs.length; i++) {
if undefineddivs[i].className &&
divs[i].className.matchundefinedtempObj.REclassMain)) {
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObjundefinedtabberArgs);
}
}
return this;
}
function tabberAutomaticOnLoadundefinedtabberArgs)
{
var oldOnLoad;


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


oldOnLoad = window.onload;
if undefinedtypeof window.onload != 'function') {
window.onload = functionundefined) {
tabberAutomaticundefinedtabberArgs);
};
} else {
window.onload = functionundefined) {
oldOnLoadundefined);
tabberAutomaticundefinedtabberArgs);
};
}
}


/* Run tabberAutomaticOnloadundefined) unless the "manualStartup" option was specified */


if undefinedtypeof tabberOptions == 'undefined') {


tabberAutomaticOnLoadundefined);


} else {


if undefined!tabberOptions['manualStartup']) {
tabberAutomaticOnLoadundefinedtabberOptions);
}


}


//]]>
</script>
<---- www.hackwithstyle.com Multi Tab code starts here ----->

• Step 4

Now search for

]]></b:skin>

and just above it paste this code,

/*---------- Tabber Start-------- */


.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;
}


/*------- Tabber End--------*/

• Step 5 

Don’t save your template. Now search for Variable definitions and paste this code with other 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">

If you can’t find Variable definitions then search for #navbar-iframe and paste this code below #navbar-iframe
 

/* 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">


*/

• Step 6

Now the final part. Search for

<div id='sidebar-wrapper'>

and paste this code just below it:

<div style='clear:both;'/>


<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'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>

• Step 7

Finally save your template and visit Layout > Page Elements to start adding widgets to the tabs! It will look something like this :


The widgets are arranged number wise. Starting from Tab-1 and ending at Tab-4. To add a gadget/widget to any tab simply click the link Add a Gadget and start adding whatever you want.
Finally view your template to see it hanging! :)

Customization Guide To Multi Tab Widget

Here we will discuss how to change the Look and position of this multi tabbed widget.

Changing Position :

To shift this tabber widget to the bottom section of your sidebar rather at the extreme top, do this,

• Paste the code in Step#6 just as shown in the image below :

• Save your template and go to Layout > Page Elements to see if it has shifted to the bottom.

Changing Look and Feel :

• The background colours of the widget can be changed by editing the code in step#5. I am rewriting the code here with some description.

<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="#289728" value="#289728">

This code has four main sections amongst which the sections tbbxcolor1: and tbbxcolor2: are the most important. I will describe each one in detail.

Important Sections:tbbxcolor1: This is an important section. It defines the background colour of this multi tab widget and also the colour on mouse hover. The default colour is white i.e #ffffff

tbbxcolor2: This refers to the background colour of the tabs and the text inside the tabs. the default colour is green. You can change the value #289728 to a different colour value using our color chart

Change these only if you wish :  

tbbxbgcolor: This section refers to the background colour of the tab box. By default the colour is grey. If you wish to change it to a different colour simply change the hexadecimal colour value #f8f8f8 to something different using our Color Chart

tbbxbrcolor: This refers to the border line color across the tabs and the box.

That’s All!

I hope this widget will help a lot in giving a clean and neat touch to your blogs. Any question is welcomed.

About the Author

I am XEO Hacker, the founder of Hack With Style (HWS). I am blogging since 2009 before that I just search things and now I am sharing my knowledge through this plateform.I'm also a freelance writer on topics related to Website Hacking,Website Optimization (SEO), blogger customizations and making money online.

Follow @xeohacker

In 61 people's circles

Subscribe To Get FREE Tutorials!

Respected Readers: As a 21 year old student, the only income I rely on is my pocket money. Bearing the running costs of HWS Blog has become really difficult. We educate thousands of bloggers a week with our tutorials. To help us go forward with the same spirit, a small contribution from your side will highly be appreciated.

Posted in: Blogging