Tutorial de menu horizontal
Autor: Sayonara | Publicado: 2011-01-13T16:03:00-08:00

Tutorial de menu horizontal
&nbsp;
Ola pessoal um menu simples, mas eficaz.


Este menu é pratico, pois é instalado no HTML JavascriptEu encontrei este modelo em formato maior e cores diferentes




Ele era assim:&nbsp; então modifiquei para combinar no meu blog e você pode fazer o mesmo.Olha como ficou :

&nbsp;&nbsp; clique aqui ver o modelo do menu
&nbsp;Fique atento para os detalhes:



Estou  dando bastantes detalhes porque tive dificuldade para entender alguns  tutoriais. Muitos explicam, mas não diz detalhadamente e aqueles que são  iniciantes ou não entendi muito fica perdido. Eu mesma fui modificando e  testando até conseguir&nbsp; deixar o menu como eu queria Ufaaa!!!!.Preste atenção:&nbsp; o&nbsp; azul muda a cor do fundo                                &nbsp; o vermelho muda a cor quando vc passa o mouse.

 o amarelo você muda a &nbsp;cor da borda e o verde muda a espessura e a largura
                                  


obs: se você usar letra maiúscula nos nomes seu menu vai ficar mais comprido.&nbsp; &nbsp;Agora  é só você copiar o código e colar Html JavaScript e arrastar para onde  você deseja colocar seu menu. Como é horizontal ideal é ficar abaixo do  cabeçalho.Você  pode também colocar mais abas no menu ou menos. É simples é só você  copiar qualquer uma das aba e colar abaixo uma da outra e para tirar só  deletar. Ex:
&lt;td class="table1" onmouseover="this.className='table2';" onmouseout="this.className='table1';"&gt;&lt;a href='endereço da Url seu blog' title='página inicial'&gt;Home&lt;/a&gt;&lt;/td&gt;  &nbsp;

&lt;td class="table1" onmouseover="this.className='table2';" onmouseout="this.className='table1';"&gt;&lt;a href='endereço da URL do facebook' title='encontre-me no facebook'&gt;Facebook&lt;/a&gt;&lt;/td&gt;

&nbsp;&lt;td class="table1" onmouseover="this.className='table2';" onmouseout="this.className='table1';"&gt;&lt;a href='mailto: endereço de seu email' title='entre em contato'&gt;Email&lt;/a&gt;&lt;/td&gt; 



Assim voçe pode colocar varias abas. 
Mais uma observação: quando for colocar o endereço e o nome não esqueça que tem ficar entre as aspas e entre&gt; &lt;
Se você desejar colocar seu menu na direita é só mudar a palavra left por right &nbsp; da primeira parte&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

&lt;table align='left' bgcolor='#458B00' border='1' cellpadding='0' cellspacing="2"&gt;



&nbsp;Agora  é só copiar o código abaixo vá em Layout ou Design e escolhe onde voçe  quer colocar seu menu, depois de escolher o lugar clique em adicionar  gadget, depois em Html/JavaScript colar o código e salvar.Espero que tenha ajudado qualquer duvida deixa recado ok!!

                                  
&lt;style&lt;!--.table1 { color:black; background-color: #458B00; }
.table2 { color:red; background-color: #FF8C00; }//--&gt;&lt;/style&gt;
&lt;table align='left' bgcolor='#458B00' border='1' cellpadding='0' cellspacing="2"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;table align='right' border='1' cellpadding='2' cellspacing="1"&gt;&lt;tr&gt;
&lt;td  class="table1" onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço da Url do  seu blog' title='página inicial'&gt;Home&lt;/a&gt;&lt;/td&gt;
&lt;td  class="table1" onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço do  facebook' title='encontre-me no  facebook'&gt;Facebook&lt;/a&gt;&lt;/td&gt;
&lt;td  class="table1" onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço do  twitter' title='siga-me'&gt;Twitter&lt;/a&gt;&lt;/td&gt;
&lt;td  class="table1" onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço de seu  feed' title='assine e receba as atualizações por  email'&gt;Feed&lt;/a&gt;&lt;/td&gt;
&lt;td  class="table1" onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço do perfil'  title='saiba mais a meu respeito'&gt;Perfil&lt;/a&gt;&lt;/td&gt;
&lt;td  class="table1" onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='mailto: endereço de  seu email' title='entre em contato'&gt;Email&lt;/a&gt;&lt;/td&gt;
&lt;td  class="table1" onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço do que  quiser' title='etc..'&gt;Etc&lt;/a&gt;&lt;/td&gt;
&lt;td  class="table1" onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço de seu  feed' title='assine e receba as atualizações por  email'&gt;Feed&lt;/a&gt;&lt;/td&gt;
&lt;td class="table1"  onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço do  facebook' title='encontre-me no  facebook'&gt;Facebook&lt;/a&gt;&lt;/td&gt;
&lt;td class="table1"  onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço do  twitter' title='siga-me'&gt;Twitter&lt;/a&gt;&lt;/td&gt;
&lt;td class="table1"  onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço do  facebook' title='encontre-me no  facebook'&gt;Facebook&lt;/a&gt;&lt;/td&gt;
&lt;td class="table1"  onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço do  facebook' title='encontre-me no  facebook'&gt;Facebook&lt;/a&gt;&lt;/td&gt;
&lt;td class="table1"  onmouseover="this.className='table2';"  onmouseout="this.className='table1';"&gt;&lt;a href='endereço do  facebook' title='encontre-me no  facebook'&gt;Facebook&lt;/a&gt;&lt;/td&gt;&nbsp;&nbsp;