Menus Sobrepostos com 8 Abas

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Houveram alguns pedidos de como fazer mais menus em abas / sobrepostos além dos 4 que ensinei.

Não tem como fazer isso no site fonte de onde traduzi o tutorial, mas pela lógica eu o alterei e deu certo.

» Essas configurações são um pouco complicadas e demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Vamos lá:

Este código será para 8 ABAS:

1º Você deve copiar o código Javascript abaixo e colar acima da tag </head> do seu blog:

<script type="text/javascript">
/*Important Function to blend the tabs in and out*/
function blendoff(idname) {document.getElementById(idname).style.display = 'none';}
function blendon(idname) {document.getElementById(idname).style.display = 'block';}
</script>

<script type="text/javascript">
/*Function for our Tabmenu with 8 Tabs*/
function swichtabs(wert) {
if (wert=='1'){
document.getElementById('tablink1').className='tab1 tabactive';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='2'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2 tabactive';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='3'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3 tabactive';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='4'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4 tabactive';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='5'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5 tabactive';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='6'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6 tabactive';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='7'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7 tabactive';
document.getElementById('tablink8').className='tab8';
}else if (wert=='8'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8 tabactive';
}
}
</script>

2º Coloque acima do código ]]></b:skin> na parte CSS do seu blog este código abaixo:

/*Example for a Menu Style*/
.menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px;  border-left:1px solid #ececec; border-right:1px solid #ececec;}
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold;  position:relative;}

Este é o código CSS do menu onde você passa o mouse. Você pode alterá-lo da maneira que quiser. Também criar um CSS para o conteúdo.

O comando .menu li a.tabactive é aquele que se sobressai quando o mouse está em cima.

3º Copie e cole este código em uma widget que você criar na parte Elementos da página do seu blog e edite-o para os conteúdos e títulos.
Você pode também colar este código na parte html do seu blog na localização que quiser.

<!--Start of the Tabmenu -->
<div class="menu">
<ul>
<li><a class='tabactive' href='http://templatesparavoce.blogspot.com' id='tablink1' onclick='return true;' onmouseover='blendon("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("1");' title=''> TÍTULO 1 </a></li>

<li><a href='#' id='tablink2' onclick='return false;' onmouseover='blendon("tabcontent2"); blendoff("tabcontent1"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("2");' title=''> TÍTULO 2 </a></li>

<li><a href='#' id='tablink3' onclick='return false;' onmouseover='blendon("tabcontent3"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("3");' title=''> TÍTULO 3 </a></li>

<li><a href='#' id='tablink4' onclick='return false;' onmouseover='blendon("tabcontent4"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("4");' title=''> TÍTULO 4 </a></li>

<li><a href='#' id='tablink5' onclick='return false;' onmouseover='blendon("tabcontent5"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("5");' title=''> TÍTULO 5 </a></li>

<li><a href='#' id='tablink6' onclick='return false;' onmouseover='blendon("tabcontent6"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("6");' title=''> TÍTULO 6 </a></li>

<li><a href='#' id='tablink7' onclick='return false;' onmouseover='blendon("tabcontent7"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff('tabcontent6'); blendoff('tabcontent8'); swichtabs("7");' title=''> TÍTULO 7 </a></li>

<li><a href='#' id='tablink8' onclick='return false;' onmouseover='blendon("tabcontent8"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff('tabcontent6'); blendoff('tabcontent7'); swichtabs("8");' title=''> TÍTULO 8 </a></li>
</ul>
</div>
<!--End of the Tabmenu -->

<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
CONTEÚDO 1 ☺
</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div style="display:none;" id="tabcontent2">
CONTEÚDO 2 ☻
</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div style="display:none;" id="tabcontent3">
CONTEÚDO 3 ♥
</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div style="display:none;" id="tabcontent4">
CONTEÚDO 4 ♦
</div>
<!--End Tabcontent 4-->

<!--Start Tabcontent 5-->
<div style="display:none;" id="tabcontent5">
CONTEÚDO 5 ♣
</div>
<!--End Tabcontent 5-->
<!--Start Tabcontent 6-->
<div style="display:none;" id="tabcontent6">
CONTEÚDO 6 ♠
</div>
<!--End Tabcontent 6-->
<!--Start Tabcontent 7-->
<div style="display:none;" id="tabcontent7">
CONTEÚDO 7 •
</div>
<!--End Tabcontent 7-->
<!--Start Tabcontent 8-->
<div style="display:none;" id="tabcontent8">
CONTEÚDO 8 ◘
</div>
<!--End Tabcontent 8-->

VISUALIZE O MENU EM ABAS »AQUI

4º Edite onde está indicado:

♦Título 1, Título 2, Título 3, Título 4... → Coloque os títulos dos conteúdos do seu menu substituindo as palavras Titulo 1, Título 2 .....
Ex: Meu menu acima do lado direito: LiINKS, COMO INSTALAR OS TEMPLATES, DICAS e VALE UM CLICK.

♦CONTEÚDO 1, CONTEÚDO 2, CONTEÚDO 3, CONTEÚDO 4... → Coloque no lugar das palavras o conteúdo dos seus menus.
Exemplos:
·Em LINKS coloquei alguns links da seguinte forma:
Substituindo o Conteúdo 1

<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
<ul>
<li><a href="#"/>LINK</a></li>
</ul>
</div>
<!--End Tabcontent 1-->

No lugar de # coloque o endereço do link e em LINK o título. Repita esta linha quantos links quiser colocar.

·Em COMO INSTALAR OS TEMPLATES coloquei um texto com a explicação de como instalar os templates.

·Em DICAS coloquei links expandíveis (que já ensinei aqui no blog) e neles os links de sites que contém Dicas que acho importantes para blogs e edição de templates.

·Em VALE UM CLICK coloquei links de blogs amigos que contém conteúdo interessante e de qualidade.

►Para aqueles que entendem um pouco de linguagem CSS ficará bem mais fácil, para os que não entendem sugiro que estude um pouco principalmente para editar o aspecto do menu. Sugiro o site:
CSS para Webdesign