Aqui neste espaço...
Apenas divulgo e indico...
Posts, notícias, dicas etc.
com devidas fontes e créditos:
você está em:http://noticiashoje3x.blogspot.com
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 = '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;}
(obs.: o no código acima, o que está na cor verde, pode ser alterado, a seu gosto!)
..." copieeste 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-->
Nenhum comentário:
Postar um comentário
Mensagem do formulário de comentário: