New Advanced Multi Tabbed Widget For Blogger Blog

This is another brand new version of advance multi tab widget, in my previous post i have discuss on similar advance multi tabbed widget and a simple version, but the problem is that the simple version not well structured, in the sense that you can't add blogger official widget under the multi tab, but this new version is well structured and so simple to implement if you follow the instruction carefully. I hope you will like to have this widget on your blog and add several widget under the tab which will surely reduce the load time of your blog instead of showing all the widget at a time, and note that this widget appears after your blog must have load fully.

Multi Tabbed Widget

Create a multi tabbed widget for blogger - Style 01

Advanced muliti tabbed widget for blogger - Style 02

New advanced multi tabbed widget for blogger blog- Style 03

How To Add Advanced Multi Tabbed Widget

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" > back up your template
• Use ctrl F to find </head> and paste the following code above/before </head>

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
  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 (arg in argsObj) { this[arg] = argsObj[arg]; }
  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');
  this.tabs = new Array();
  if (this.div) {
    this.init(this.div);
    this.div = null;
  }
}
tabberObj.prototype.init = function(e)
{
  var
  childNodes,
  i, i2,
  t,
  defaultTab=0,
  DOM_ul,
  DOM_li,
  DOM_a,
  aId,
  headingElement;
  if (!document.getElementsByTagName) { return false; }
  if (e.id) {
    this.id = e.id;
  }
  this.tabs.length = 0;
  childNodes = e.childNodes;
  for(i=0; i < childNodes.length; i++) {
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      t = new Object();
      t.div = childNodes[i];
      this.tabs[this.tabs.length] = t;
      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
  }
  DOM_ul = document.createElement("ul");
  DOM_ul.className = this.classNav;
  for (i=0; i < this.tabs.length; i++) {
    t = this.tabs[i];
    t.headingText = t.div.title;
    if (this.removeTitle) { t.div.title = ''; }
    if (!t.headingText) {
      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) {
      t.headingText = i + 1;
    }
    DOM_li = document.createElement("li");
    t.li = DOM_li;
    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;
    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;
    if (this.addLinkId && this.linkIdFormat) {
      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;
    }
    DOM_li.appendChild(DOM_a);
    DOM_ul.appendChild(DOM_li);
  }
  e.insertBefore(DOM_ul, e.firstChild);
  e.className = e.className.replace(this.REclassMain, this.classMainLive);
  this.tabShow(defaultTab);
  if (typeof this.onLoad == 'function') {
    this.onLoad({tabber:this});
  }
  return this;
};
tabberObj.prototype.navClick = function(event)
{
  var
  rVal,
  a,
  self,
  tabberIndex,
  onClickArgs;
  a = this;
  if (!a.tabber) { return false; }
  self = a.tabber;
  tabberIndex = a.tabberIndex;
  a.blur();
  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;
  for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
  }
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  div = this.tabs[tabberIndex].div;
  if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
  }
  this.navClearActive(tabberIndex);
  return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  this.tabHideAll();
  div = this.tabs[tabberIndex].div;
  div.className = div.className.replace(this.REclassTabHide, '');
  this.navSetActive(tabberIndex);
  if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
  }
  return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = this.classNavActive;
  return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = '';
  return this;
};
function tabberAutomatic(tabberArgs)
{
  var
    tempObj,
    divs,
    i;
  if (!tabberArgs) { tabberArgs = {}; }
  tempObj = new tabberObj(tabberArgs);
  divs = document.getElementsByTagName("div");
  for (i=0; i < divs.length; i++) {
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
  }
  return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
  var oldOnLoad;
  if (!tabberArgs) { tabberArgs = {}; }
  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>

• Now search for ]]></b:skin> and paste the following code before/above ]]></b:skin>

    /*---------- Multi Tabbed Widget By www.realcombiz.com -------- */


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

    /*------- Multi Tabbed Widget By www.realcombiz.com --------*/

• Now search for Variable definitions and include the code below in the 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="#b60000" value="#b60000"/>

In some template, you may not find variable definitions, then search for #navbar-iframe and paste the above code below #navbar-iframe. See the screenshot below for a better idea on how to place the code

• Now finally search for <div class='column-right-inner'> if you are using new blogger template OR find <div id='sidebar-wrapper'> for other templates, and below any of this code paste the following code

    <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>

By default, adding the code above below any of the code you find will automatically place the widget at the bottom of your sidebar, but if you which to add it to the topmost of your sidebar then add it above </div> tag as shown in the screenshot below.

• Click "SAVE TEMPLATE"
• Now go to "Page elements", click on "Add a Gadget" and start adding widgets under each tab

Customization

• The default background color of the tab box, if you wish to change the color, then edit #f8f8f8
• To change the outer background color of the widget, then replace #dcdcdc with your preferred color
• To change the inner background color of the widget which is white, simply edit #ffffff
• To change the background color of the tab box which is red by default, simply edit #b60000

Done!
Hope that's cool? Take few seconds to share this posts with friends/followers and subscribe for more update.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz