ADD MULTI TABBED WIDGET TO BLOGGER

Today I am going to share a very beautiful, attracting widget that I came across was the Multi Tabbed Widget scripted by Barelyfitz and stylized by Lawny Designs. This widget is one of the best widget but the original designers did not made it for blogger platform. But you guys don't worry as I modified their coding and make this widget compatible for blogger platform. This widget is being used on many popular blogs also. This widget is quite easy to install and can be installed on the blog having low free space. By...
To add this widget to your Blogger Blogs, follow these steps

1. Go to Blogger > Layout > Edit HTML

1. Search For </head>

1. And paste this code just above it,

<!-- Tabber Widget By www.mybloggerbuzz.com -->

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

   4. Now search for ]]></b:skin>  and just above it paste this code,

/*---------- Tabber Start by www.mybloggerbuzz.com -------- */

.tabberlive{
    margin:0;
    padding:5px;
    clear:both;
    background:#f8f8f8;
    border:1px solid #DDD;
}
.tabbernav {
    margin:0;
    padding: 3px 0;
    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:6px 0.5em;
    margin-right:1px;
    border:1px solid #DDD;
    border-bottom:none;
    background:#0084ce;
    text-decoration:none;
    color:#ffffff;
}
.tabbernav li a:hover {
    color:#fff;
    background:#333;
    border:1px solid #DDD;
    text-decoration:none;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover {
    background:#333;
    color:#fff;
    border-bottom: 0px solid #ffffff;
}
.tabberlive .tabbertab {
    padding:5px;
    border:0px solid #DDD;
    border-top:0;
    background:#ffffff;
}
.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 #ddd;
    padding:2px 0 5px 0;
}


/*------- Tabber by www.MyBloggerBuzz.com End--------*/

     5. Now comes the final part. Search for <div id='sidebar-wrapper'> closing </div> and paste this code just above as shown in the image,