22/09/2012

Tutorial: Menu Hover

              
Oi gente tudo bom?
Então esse tutu é de menu  pra você colocar no seu blog e deixa-lo mega divooo!



Para coloca-lo no blog, vá em design>editar HTML> pesquise por:  ]]></b:skin>
Coloque o seginte código acima dele:

.menucherrysweet {
background-color: #E6E6FA; /* cor do fundo */
float: left;
color: #000000; /* cor da fonte */
width: 100px; /* largura do menu */
font-size: 12pt; /* tamanho da fonte */
text-align: center;
margin: 3px;
line-height:25px;
font-variant: small-caps;
margin-bottom: 1px;
-moz-border-radius: 20px; /* bordas arredondadas */
-webkit-border-radius: 20px; /* bordas arredondadas */
border-radius: 20px; /* bordas arredondadas */
-webkit-transition-duration: 1.80s;
}

.menucherrysweet:hover {
background-color: #FFE4E1; /* cor do fundo */
color: #000000; /* cor da fonte */
float: left;
-moz-border-radius: 20px; /* bordas arredondadas */
-webkit-border-radius: 20px; /* bordas arredondadas */
border-radius: 20px; /* bordas arredondadas */
-webkit-transition-duration: 1.80s;
}

Salve, agora vá em Elementos da página> Adicionar um gadget> HTML/JavaScript e cole o seguinte código:

<div class="menucherrysweet"><a href="LINK">NOME</a></div>
<div class="menucherrysweet"><a href="LINK">NOME</a></div>
<div class="menucherrysweet"><a href="LINK">NOME</a></div>
<div class="menucherrysweet"><a href="LINKI">NOME</a></div>

Ps:Esse tutorial é inteiramente do blog Cantinho Backgrounds.

Conseguiram?

Nenhum comentário: