Menu Hover

Yo, me pediram pra ensinar o menu hover é um efeito bem legal vamos lá.

O Menu Hover é uma coisa muito legal do CSS, ao passar o mouse ele troca a imagem do background, por exemplo: O menu vertical daqui do site é usado com essa mesma técnica.

Primeiro passo.

Bom, no blogger, vá em Design, Editar HTML, procure pela tag:

]]></b:skin>

Acima dela cole este código CSS:

#menux ul {

 list-style: none;

 margin: 0px 0px 0px 0px;;

 padding: 0;

 border: none;

}

#menux li a {

 height: 18px;

 display: block;

 padding: 4px 5px 5px 18px;

 background: url(LINK_DA_IMAGEM_NORMAL) no-repeat;

 color: #ffffff;

 text-shadow: #000 0 1px 0;

 font-weight: normal;

 text-decoration: none;

 width: 186px;

}

#menux li a:hover {

 background: url(LINK_DA_IMAGEM_HOVER) no-repeat;

 color: #000;

 text-shadow: #666666 0 1px 0;

 }

Bom, em color é a cor do texto, em height a altura em píxels, em width a largura em píxels, em padding você posiciona o texto.

Agora vamos aos links, definiremos uma div para aplicar as configurações da folha de estilos CSS, criamos-a com o nome menux então o id da div terá de ser menux.

então nosso código fica assim:

<div id="menux">

<ul>

<li><a href="LINK_DO_POST">NOME_DO_POST</a></li>

</ul>

</div>

Para adcionar mais um link basta duplicar o código abaixo e colocar ele embaixo do outro:

<li><a href="LINK_DO_POST">NOME_DO_POST</a></li>

Pronto, agora você ja tem um menu legal com efeito hover.