Menus Sobrepostos com 4 Abas

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Estive procurando este hack por muito tempo até que achei e já apliquei aqui no Templates.

» Vou ensinar aqui como fazer o do lado direito superior daqui do Templates onde você passa o mouse e aparece o conteúdo:
Encontrei este meu no site do Austríaco Jürgen Koller - Kollermedia.at
Este é o menu simples, lá tem outras opções de menus mais complexos que pretendo traduzir e postar aqui.

» Essas configurações são um pouco complicadas e demandam certo 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á:

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 4 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';
}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';
}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';
} 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';
}
}
</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.
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 href="#" class="tabactive" id="tablink1" onclick="return false;" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); 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'); 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'); 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'); swichtabs('4');" title="" >Título 4 </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-->

4º Edite onde está indicado:

♦Título 1, Título 2, Título 3 e 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 e 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.

Veja em TEMPLATES

·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