18/09/2012

Menu Sidebar Hover [002]


Oi pessoal!!! Trago mas tutorial de menu para sidebar. Esse e quadradinho e bem simples mas dependendo da arrumação do blog e as cores ele fica lindo! Esse menu eu usei no meu layout free o Cute Nute.

*Modelo*


Bom então vamos lá?

1. Vá em seu HTML e procure pela tag ]]></b:skin>, e acima dele cole esse código:

Códigos
/* Menu Cute Panda */
cute{
text-align:center;
font-size: 12px; /* Tamanho da fonte*/
background: #FFB8DA; /* Fundo */
padding: 2px;
float: left;
margin: 2px;
width: 40%; /* Tamanho do menu
-webkit-transition-duration: .90s; /* Efeito do fade */
border:1px dashed #5988FF; /* Bordas */
color: #FF1F7A; /* Cor da fonte*/
}
cute:hover{
font-size: 12px; /* Tamanho da fonte hover */
background: #9FBAFF; /* Fundo de quando passa o mouse */
border:1px solid #FF1F7A; /* Bordas de quando passa o mouse */
color: #FF1F7A; /* Cor da fonte quando passa o mouse */
-webkit-transition-duration: .80s;
letter-spacing: 4px; /* Espaço das letras em hover */
}

O código e auto explicativo, então já da para entender bem fácil.

2. Agora adicione um Gadget HTML/Java Script, e dentro dele cole esse código:

Códigos
<a href="URL"><cute> NOME </cute></a>
<a href="URL"><cute> NOME </cute></a>
<a href="URL"><cute> NOME </cute></a>
<a href="URL"><cute> NOME </cute></a>

Gostou? Não esqueça de comentar e se for copiar credite *^^*

2 comentários:

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345