Inserindo Menu em Abas no blogger

Devido ao 100 post vou fazer o meu 1º tutorial...como inserir um "Menu em Abas" no blogger...entao vamos começar...

Primeiro va no seu template e procure por esse codigo:

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

Apos esse codigo cole esse:

/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{
width: 384px; /* 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;}

De pois procure pela tag:

]]></b:skin>

e cole apos essa tag isso:

<!-- JavaScript Menu em Abas -->
<script src='http://rxa6mg.bay.livefilestore.com/y1pOcTXI_FB2jaMOTyciw4lveDgt92Lo4Bc6iqF8u02_uDW1dfrrYULTuF0YqeXkUKO-izn5MZaulo/tabber.js?download' type='text/javascript'/>

Depois procure por esse codigo:

<div id='main-wrapper'>
<b:section class='main' id='main' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

E cole apos isso esse codigo:

<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'>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div></div><!-- Fim da tabsidebar-wrapper-->

E pronto vo ja tem o seu menu em abas no seu blog...para colocar o que quiser colocar no blog mas esta sem espaço..esse menu e otimo...

vlw gente ae logo mais coloco outro tutorial aqui...

Menu por Dicas Blogger