Tabbed Content Navigation Widget For Blogger

Tabbed content navigation widget for blogger,everybody would have seen it in many of the bloggers using this tabbed navigtaion widget.There are many designs of tabbed navigation widgets used and designed by many bloggers.Today i will tell you how to install the tabbed navigation widget for the blogger.

Login To Blogger > Layout > Edit HTML > Press Ctrl + F > Search For </b:skin>

And add the below codes before it

/*——–Tabber ———————————*/
#tabsidebar-wrapper{
width: 375px; /* Mesma largura da Sidebar */
float: right;
border: 1px none #CCC;
margin-bottom: 15px;
}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:2px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em;
margin-right:2px;
border: 1px solid #CCC;
border-bottom: none;
background: #fff;
text-decoration: none;
}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#369; background: #e6e6e6; border-color: #CCC;}
ul.tabbernav li.tabberactive a{
background-color: #e6e6e6;
color: #369;
border-bottom: 1px solid #e6e6e6;
}
ul.tabbernav li.tabberactive a:hover{
color: #369;
background: #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
.tabberlive .tabbertab {
background: #e6e6e6;
padding:5px;
border:1px solid #ccc;
border-top:0;
}

.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

Just download this tabber js file from here and upload to your own server.

Now Search For </head>

And Place this script before it.

<script src=’http://www.your-url.com/scripts/tabber.js’ type=’text/javascript’/>

Just replace the above red script link with yours to make it work..

Now search for Below codes without expanding the widgets-

<div id=’sidebar-wrapper’>

And add the below codes before the above code

<div id=’tabsidebar-wrapper’>
<div class=’tabber’ id=’tab1′>
<div class=’tabbertab’>
<b:section class=’sidebar’ id=’tabbertab1′ maxwidgets=’1′ showaddelement=’yes’>
</b:section>
</div>
<div class=’tabbertab’>
<b:section class=’sidebar’ id=’tabbertab2′ maxwidgets=’1′ showaddelement=’yes’/>
</div>
<div class=’tabbertab’>
<b:section class=’sidebar’ id=’tabbertab3′ maxwidgets=’1′ showaddelement=’yes’/>
</div>
</div></div>

Now Preview Your Template > If no Error Save it.

I hope you will install it succesfully as it is very easy. This navigation widget is presently used in my blogger template you can check it.

If you find it difficult to implement or doesn’t liked its design then check this tabbed navigation widget by Bloganol.

If you have any problems in istalling it leave your comments below.

19 Comments

  1. Tomaz Vorsic March 4, 2009
  2. AB March 20, 2009
  3. Anonymous May 27, 2009
  4. Anshul May 27, 2009
  5. AKURO SAN June 3, 2009
  6. mahawira June 4, 2009
  7. nakmengwi August 4, 2009
  8. Anshul December 1, 2009
  9. David December 31, 2009
  10. The Blind Assassin..... February 20, 2010
  11. Anshul February 21, 2010
  12. Welcome Hackerz July 6, 2010
  13. 2t@ July 6, 2010
  14. Anshul July 7, 2010
  15. Anshul July 22, 2010
  16. RP4 July 30, 2010

Leave a Reply