Sunday, 21 December 2014

Advanced Multi Tabbed Widget for 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 using the tabs, visitors can enjoy posts categorized differently. So lets start rolling your fingers to add this widget to your blog.

Add Multi Tabbed Widget to Blogger:

To add this widget to your Blogger Blogs, follow these steps,

  1. Go to Blogger Layout > Edit HTML
  2. Search For </head>
  3. 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,





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


  • If you want only three tabs, then deleted the highlighted code.
     6. Now finally save your template. Visit the Layout to add widgets to the tabs! 


Reposition the Multi Tab Widget

In this part of the post, we will discuss how to change the position of this Multi Tabbed widget. 


Changing Position : 

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

    • Paste the code in Step#5 just above <div id='sidebar-wrapper'> 
    • Save your template and go to Layout > Page Elements  to see if it has shifted to the top.

    In the Last :


    I hope you successfully add this widget to your blog. If you are facing any difficulty then let me know via comments. Keep sharing this post with your friends so that they can also enjoy the post till then Happy Blogging!

    2 comments: