...Saiba Como se Faz:..."Menu em 8 abas" | #blogdicasblogueiros ...bdb... blog dicas blogueiros

...Saiba Como se Faz:..."Menu em 8 abas"

Aqui neste espaço... 
Apenas divulgo e indico... 
Posts, notícias, dicas etc. 
 com devidas fontes  e créditos:    
 Aprenda Como se Faz:..."Menu em 8 abas"

... presente tutorial ,
fonte e créditos para:
http://templateseacessorios.blogspot.com/
2009/05/menu-em-8-abas.html




...sendo que,
assim como Eu,

Elke viu em  Templates para VOCÊ, blog da Áurea...

... "   Áurea tem alguns modelos, 

inclusive,
ensina 
a colocar
abas nos comentários. "

Elke, desenvolveu,
baseada
no código de Áurea, o Menu com 08 (oito) abas,
pois no
blog da
Áurea,
( http://www.templatesparavoce.com)
o Menu tem 04 (quatro) abas,


...e,

..."  para facilitar ...

...colocou  no blog,

http://templateseacessorios.blogspot.com/


..."  o código"   ...

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



(obs.: o no código acima, o que está na cor verde, pode ser alterado, a seu gosto!)

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

flo

http://blogdicasblogueiros.blogspot.com.br/

Nenhum comentário:

Postar um comentário

Mensagem do formulário de comentário: