Menu em 08 (oito) abas
"A primeira tutorial sobre este tipo de menu vi no blog da Áurea, o Templates para VOCÊ."(Eu também!)
" Lá 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."
(Eu, também, abaixo, justifico o presente post!...(: ...)
" 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 = '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'){
</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-->
fonte e créditos deste presente post:
http://templateseacessorios.blogspot.com/2009/05/menu-em-8-abas.html OBS.:
também pedi autorização a:de
http://www.templatesparavoce.com/ e Elke ,
de
http://templateseacessorios.blogspot.com ...para postar seus posts explicativos, no meu blog, citando fonte e créditos!
...pois, pesquisei em vários locais e só nas fontes acima citadas encontrei a resposta verdadeira...
:)
Comments
Logging you in... - Logged in as
Comments by IntenseDebate
Postagens
.ico){kind=small}
0 comentários:
Postar um comentário