7 de mai de 2009

Menu em 8 abas

A primeira tutorial sobre este tipo de menu vi no blog da Áurea, o Templates para VOCÊ.




La ela tem alguns modelos, inclusive ensina a colocar abas nos comentários. O fato é que sempre que preciso vou lá buscar o código, mas sempre tenho um trabalhão pois ela disponibiliza este menu com 4 abas e preciso sempre com 8 abas. Portanto, para facilitar a minha vida, e talvez a sua, coloco agora no blog o código. Com a sua licença Áurea.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.



Vá até o HTML do seu blog e cole o código abaixo antes de:

</head>




<script type='text/javascript'>

/*Important Function to blend the tabs in and out*/

function blendoff(idname) {document.getElementById(idname).style.display = &#39;none&#39;;}

function blendon(idname) {document.getElementById(idname).style.display = &#39;block&#39;;}

</script>

<script type='text/javascript'>

/*Function for our Tabmenu with 4 Tabs*/

function swichtabs(wert) {

if (wert==&#39;1&#39;){

</script>



Copie este próximo código (que é o código onde você pode modificar as cores da barra do menu) cole acima de:

]]></b:skin>


/*Example for a Menu Style*/
.menu {background-color:#3D40CB; color:#ffffff; 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:#8083FC; font-weight:bold; position:relative;}


Agora copie este próximo código, vá até 'Elementos da página" e cole no HTML/Javascript em seu blog. Faça as modificações e salve.



<!--Start of the Tabmenu -->
<div class="menu">
<ul>
<li><a id="tablink1" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('1');" href="#" class="tabactive" onclick="return false;" title="">Título 1 </a></li>

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

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

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

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

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

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

<li><a id="tablink8" onmouseover="blendon('tabcontent8'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); swichtabs('8');" href="#" onclick="return false;" title="">Título 8 </a></li>

</ul>
</div>
<!--End of the Tabmenu -->
<!--Start Tabcontent 1 -->
<div id="tabcontent1" style="display:block;">

CONTEÚDO 1

</div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div id="tabcontent2" style="display:none;">

CONTEÚDO 2

</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div id="tabcontent3" style="display:none;">

CONTEÚDO 3

</div>
<!--End Tabcontent 3-->
<!--Start Tabcontent 4-->
<div id="tabcontent4" style="display:none;">

CONTEÚDO 4

</div>
<!--Start Tabcontent 5-->
<div id="tabcontent5" style="display:none;">

CONTEÚDO 5

</div>
<!--Start Tabcontent 6-->
<div id="tabcontent6" style="display:none;">

CONTEÚDO 6

</div>
<!--Start Tabcontent 7-->
<div id="tabcontent7" style="display:none;">

CONTEÚDO 7

</div>
<!--Start Tabcontent 8-->
<div id="tabcontent8" style="display:none;">

CONTEÚDO 8

</div>
<!--End Tabcontent 8-->

5 comentários:

  1. Oi fro

    vim deixar bjks proce no nosso dia, que Deus abençoe seus pequenos e a voce para que esteja com eles sempre, os guardando e cuidando como so mãe sabe fazer.

    Parabens pela Julia e pelo Gabriel

    ResponderExcluir
  2. Oi Teca, obrigada menina. Beijos para vc também.

    ResponderExcluir
  3. Olá Elke, tudo bem?
    Olha, eu coloquei o código para 8 abas no meu blog, e apareceram, bunitinhas, mas qd clico no tema, não vai para a página.
    Eu nãosei o que anda acontecendo comigo, já fiz isso no outro blog e funciona, mas acho que estou caduca,não me lembro como fazer nesse.
    Você poderia me dar uma força?
    Deus te abençoe.
    O Blog é o www.tudoearte-dakattyy.blogspot.com

    ResponderExcluir
  4. amigha me ajude coloquei la aperece mas quando aperto naum aparece nada nem sai do lugar.
    meu blog é ritaruiva.blogspot.com

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube