How to add a tabbed navigation to your blogger site




  Adding a tabbed navigation to your blog site .           

The important reason or advantage of this widget is to reduce the bulkiness of your site and make it simple for visitors to navigate through. you can add recent post, Facebook like box.. anything you can think of... you can as well increase the number of tab anytime you wish or desire after installation.... 





    How To Install This Widget?


    • log in to your blogger dashboard
    • Select the blog you would want to install this widget
    • Go to your HTML editor
    • look for this code in your HTML  ]]></b:skin>
     find it easily by press  Ctrl + F key and type it in search space.........paste the code below before it  .. i mean before this (]]></b:skin>)



    • Paste this code before/above it


     /* Tabview for Blogger
    ----------------------------------------------- */
    .tabviewcont{
    margin:15px 0;
    padding:0;
    clear:both;
    }

    .tabviewnav {
    margin: 0 0 0 14px;
    padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */
    font-size:12px; /* Font size of text inside tabs */
    font-weight:bold;
    }
    .tabviewnav li {
    list-style:none;
    margin:0;
    display:inline;
    }
    .tabviewnav li a {
    padding:3px 6px;
    margin-right:1px;
    background:#F6F6F6; /* The background color of the tabs */
    border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    text-decoration:none;
    color:#222222;
    }
    .tabviewnav li a:hover {
    color:#222222;
    background:#EBEBEB; /* Background color of the tab on mouseover */
    text-decoration:none;
    }
    .tabviewnav li.tabviewactive a,
    .tabviewnav li.tabviewactive a:hover {
    background:#EBEBEB; /* Background color of the active tab */
    color:#222222;
    }
    .tabviewcont .tabviewtab {
    padding:5px;
    border:1px solid #EEEEEE; /* Border around the container */
    background:#fff; /* The background color of the gadget */
    }
    .tabviewcont .tabviewtab h2,
    .tabviewcont .tabviewtabhide {
    display:none;
    }
    .tabviewtab .widget-content ul{
    list-style:none;
    margin:0 0 10px 0;
    padding:0;
    }
    .tabviewtab .widget-content li {
    border-bottom:1px solid #ccc;
    margin:0 5px;
    padding:2px 0 5px 0;
    }




    • with the same process in previous step Find the </head> 
    • Paste the code below before the head code </head> 



     <script type='text/javascript'>
    // Tabview for grouping gadgets

    //<![CDATA[
    document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>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}}tabviewObj.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.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/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({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
    //]]>
    </script>



    • Find this code  <div class='column-right-inner'>  or <div id='sidebar-wrapper'> or  sidebar-wrapper'>
    • Add the code below just below it.....




       <div class='tabview'>
      <b:section class='tabviewtab' id='Tab1' maxwidgets='1'/>
      <b:section class='tabviewtab' id='Tab2' maxwidgets='1'/>
      <b:section class='tabviewtab' id='Tab3' maxwidgets='1'/>
      </div>



      Save your HTML and navigate to the layout section.... you layout side bar section would look like this




      If you wish to add another tabs, then just add  the code below before the last </div> 

       <b:section class='tabviewtab' id='Tab4' maxwidgets='1'/>
      You can add as multiple tab as you want too be repeating the process.....

      Please leave us a comment if  the post helped you and don't hesitate to let us know if you have any problem!!!!


      0 default, disqus:

      Post a Comment