Menu em 8 abas
Autor: Edilene brandao da silva | Publicado: 2010-11-09T15:29:00-08:00






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




"&nbsp; 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!...(: ...) 


"&nbsp; 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."
&nbsp;.:.
&nbsp; 

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

&lt;/head&gt;



&lt;script type='text/javascript'&gt;


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


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


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


&lt;/script&gt;


&lt;script type='text/javascript'&gt;


/*Function for our Tabmenu with 4 Tabs*/


function swichtabs(wert) {


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


&lt;/script&gt;

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

]]&gt;&lt;/b:skin&gt;

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

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



&lt;!--Start of the Tabmenu --&gt;
&lt;div class="menu"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;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=""&gt;Título 1 &lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;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=""&gt;Título 2 &lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;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=""&gt;Título 3 &lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;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=""&gt;Título 4 &lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;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=""&gt;Título 5 &lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;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=""&gt;Título 6 &lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;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=""&gt;Título 7 &lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;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=""&gt;Título 8 &lt;/a&gt;&lt;/li&gt;

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

CONTEÚDO 1
&lt;/div&gt;
&lt;!--End Tabcontent 1--&gt;
&lt;!--Start Tabcontent 2--&gt;
&lt;div id="tabcontent2" style="display:none;"&gt;

CONTEÚDO 2
&lt;/div&gt;
&lt;!--End Tabcontent 2 --&gt;
&lt;!--Start Tabcontent 3--&gt;
&lt;div id="tabcontent3" style="display:none;"&gt;

CONTEÚDO 3

&lt;/div&gt;
&lt;!--End Tabcontent 3--&gt;
&lt;!--Start Tabcontent 4--&gt;
&lt;div id="tabcontent4" style="display:none;"&gt;

CONTEÚDO 4

&lt;/div&gt;
&lt;!--Start Tabcontent 5--&gt;
&lt;div id="tabcontent5" style="display:none;"&gt;

CONTEÚDO 5

&lt;/div&gt;
&lt;!--Start Tabcontent 6--&gt;
&lt;div id="tabcontent6" style="display:none;"&gt;

CONTEÚDO 6
&lt;/div&gt;
&lt;!--Start Tabcontent 7--&gt;
&lt;div id="tabcontent7" style="display:none;"&gt;

CONTEÚDO 7
&lt;/div&gt;
&lt;!--Start Tabcontent 8--&gt;
&lt;div id="tabcontent8" style="display:none;"&gt;

CONTEÚDO 8

&lt;/div&gt;
&lt;!--End Tabcontent 8--&gt;&nbsp;fonte e créditos deste presente post:http://templateseacessorios.blogspot.com/2009/05/menu-em-8-abas.html&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


OBS.:também pedi autorização a:
 &nbsp;
Áurea &nbsp;dehttp://www.templatesparavoce.com/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

e Elke ,&nbsp;
&nbsp;dehttp://templateseacessorios.blogspot.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

...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...
:)


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;http://wwwformasdecontatocombr.blogspot.com   &nbsp;&nbsp;&nbsp;  ...intensedebate...Mensagens / Recados/ Comentários...   Comments  
 Logging you in... Close  Login to IntenseDebate Or create an account 
Username or Email: Password:    
Forgot login?OpenID  
Cancel Login Close  Login with your OpenID Or create an account using OpenID 
OpenID URL:   Back  
Cancel 7)%20document.getElementById('frmHeadLoginOpenID').submit();%20else%20showMsgBox('Invalid%20OpenID%20url.',%20'  Please%20put%20in%20your%20OpenID%20URL%20and%20try%20to%20login%20again! ',%200,%20this);"&amp;gt;Login Dashboard Edit profile Logout Logged in as 
Admin options 
  Disable comments for this blog post  Save settingsThere are no comments posted yet. Be the first one!  
Post a new commentEnter text right   here! Comment as a Guest, or login:Login to IntenseDebate
Login to Twitter
Login to OpenID
Go back  Tweet this comment  
Connected as (Logout) Email (optional)   
Not displayed publicly.Name Email  Website (optional)    
Displayed next to your comments.  
Not displayed publicly.  
If you have a website, link to it here.      
OpenID URL   
Comment as a Guest or login using OpenIDPosting anonymously. Tweet this commentSubmit Comment Subscribe to  NoneRepliesAll new comments  volte sempre Comments by IntenseDebateEnter text   right here! Reply as a Guest, or login:Login to IntenseDebate
Login to Twitter
Login to OpenID
Go back  Tweet this comment  
Connected as (Logout)Email (optional)   
Not displayed publicly.Name Email Website (optional)   
Displayed next to your comments.  
Not displayed publicly.  
If you have a website, link to it here.      
OpenID URL   
Comment as a Guest or login using OpenIDPosting anonymously. Tweet this commentCancel Submit Comment Subscribe to  NoneRepliesAll new comments 
           
     http://formasdecontato.blogspot.com