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-->