19/09/2012

Tutorial: Menu Bad Reputation

||

Vim ensinar como se fazer um menu muito fofo. E claro os créditos são todos do blog Bad Reputation.
Mas e ai vamos ao tutu?

Quando prontinho ele ficara assim

Bom sem mais demoras vamos lá! Em seu HTML procure por ]]></b:skin>, achou? Agora acima dele coloque isso:

/*-----Início do Menu Bad Reputation-----*/

kbr {
background:#eee; /* Cor de fundo do Menu */
width: 20%; /* Tamanho do Menu (Largura) */
text-align: center;
font-size: 8px; /* Tamanho da fonte */
color: #000; /* Cor da fonte */
letter-spacing:1px;  /* Espaço entre as letras */
padding: 4px;
margin: 2px;
float: left;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
-webkit-transition-duration: .90s; /* Tempo do Efeito */
}
kbr:hover {
background:#000; /* Cor do fundo do Menu ao passar o mouse */
width: 20%; /* Tamanho do Menu ao passar o mouse */
text-align: center;
font-size: 8px; /* Tamanho da fonte ao  passar o mouse */
color: #fff; /* Cor da fonte ao passar o mouse */
letter-spacing:1px; /* Espaço entre as letras */
padding: 4px;
margin: 2px;
float: left;
-moz-border-radius: 10px 25px / 25px 10px;
border-radius: 10px 25px / 25px 10px;
-webkit-transition-duration: .90s; /* Tempo do Efeito */
}
/*-----Fim do Menu Bad Reputation-----*/


Agora adicione um gadget HTML/JavaScript e dentro dele coloque isso:

<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>

Prontinho nem precisa explicar porque já e tudo bem fácil e auto explicativo.

Nenhum comentário:

Postar um comentário

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