quarta-feira, 9 de outubro de 2013

Menu hover

há dois menus diferentes, vou contar um de cada vez ok? Começando com o mais fácil, esse aqui:
É bem simples, vamos ver?

1- Primeiramente temos que instalar o comando no seu modelo. Vá em "Design", "Editar HTML" aperte Ctrl + F e procure por ]]></b:skin>
Acima desse trecho cole o seguinte código:

 /* MENU SPAZIO DM */
.menu {
background: url(URL DA IMAGEM) no-repeat; /*imagem do fundo normal*/
float:left; /*posicionamento*/
font-family:Courier; /*fonte da letra*/
color: #XXXXXX; /*cor da letra*/
font-size: 10pt; /*tamanho da fonte*/
width:98px; /*largura da imagem*/
text-align: center;
margin: 3px;
line-height:25px;
margin-bottom: 1px;
}
.menu:hover {
background: url(URL DA IMAGEM)no-repeat; /*imagem de fundo hover*/
font-family: Courier; /*fonte hover*/
color: transparent; /*cor da letra hover*/
float:left; /*posicionamento*/
}

2- Agora salve e vá em "Elementos da página" Adicione um gadget de HTML/JavaScript e cole o seguinte código:

 <div class="menu"><a href="URL PARA REDIMENCIONAR">TÍTULO</a>
Exemplo:
<div class="menu"><a href="http://deboramoraiss.blogspot.com/p/sobre.html">Sobre o blog</a>

Para cada link que for adicionado ao seu menu deve-se adicionar essa linha de código. Na hora lembre-se de colocar o gadget no lugar desejado.
Espero que tenham gostado, lembre-se que se reblogar deve ser creditado.

Nenhum comentário:

Postar um comentário