Menu com Efeito Hover ~ Turquesa

Uma das coisa que a maioria dos novos blogueiros quer ter no seu blog e um menu diferente e legal. Já fiquei muito tempo atras de alguem que encinasse a fazer um menu com efeito hover, agora já vejo em alguns blogs. Esse é um menu pode ser adicionado em blogs e em sites também

É bem simples de instalar no seu blog ou site, e você pode colocar imagens de diferentes cores e diferentes estilos. Veja como o seu menu hover ficará depois de pronto:EXEM

Inserindo o Menu

1) Entre no painel do blog ► layolt ►Adicionar um Gadget

Clique em HTML/JavaScript.

2) Irá aparecer uma página para adicionar o Gadget.

O campo “Titulo” é o nome do Gadget, se você for utilizar o menu para definir as categorias do seus posts você pode colocar o nome de “Categorias”. Mas isso e você quem escolhe…

(se quiser adicionar em um site, basta colar o seguinte código no local desejado)

No campo “Conteúdo” você ira colocar o HTML do menu

Coloque este código abaixo:

<div class="menu"><a href="URL"><font color="#fff" face="calibri" size="3">TEXTO DO LINK</font></a></div>

Onde está destacado… você pode modificar!

★ = É o URL (link para a página que o menu irá levar).

★ = É a cor do link do menu (no exemplo do menu hover deixei em branco).

★ = Fonte (Tipo da letra) do link.

★ = Texto que aparecerá no Menu.

ATENÇÃO: Para adicionar um menu, basta você copiar duplicar este código no gadget e trocar apenas o URL e o TEXTO DO LINK.

Estilos:

Agora vamos aplicar modelos a este menu:

1) Entre no painel do blog ► Modelo ► Editar HTML_{(Clique em Prosseguir)}

Procure por ]]></b:skin>_{(Aperte ctrl+F para procurar!)}

Cole o código seguinte ACIMA dele

/*Menu com Efeito Hover*
---------------------------------------------*/
.menu {
background:url(http://3.bp.blogspot.com/-TLXmFev8280/UHYwq43_5vI/AAAAAAAAFJM/cseLUL2ilM4/s1600/Menu+1.png) no-repeat;
float:center;
width:190px;
text-align: center;
margin:1px;
line-height:42px;
margin-bottom:2px;
margin-top:-1px;
}
.menu:hover {
background: url(http://1.bp.blogspot.com/-TMtgfI1cSas/UHYwsGSa-yI/AAAAAAAAFJU/746hYqBOwCw/s1600/Menu+2.png)no-repeat;
float:center;
}