Tutorial de menu horizontal

Ola pessoal um menu simples, mas eficaz.

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

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

   clique aqui ver o modelo do menu

 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  deixar o menu como eu queria Ufaaa!!!!.
Preste atenção:
  o  azul muda a cor do fundo
  o vermelho muda a cor quando vc passa o mouse.

o amarelo você muda a  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. 
 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. 

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

<table align='left' bgcolor='#458B00' border='1' cellpadding='0' cellspacing="2">

 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 dúvida deixa recado ok!!

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