18/09/2012

Tutorial: Menu para sidebar ²

||

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á?

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

/* 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.
Agora adicione um Gadget HTML/Java Script, e dentro dele cole esse código:

<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:

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram