quinta-feira, 18 de julho de 2013

Tutorial - Menu Stripe!



Boa Tarde meus queridos e queridas. Eu vou postar o tuto desse menu , achei ele super fofo e simples, confiram:


Reparem que quando passa o mouse ele fica de outra cor, super lindo né? Vamos aprender?


Você devera ir em Modelo > Depois você devera ir em Editar HTML > Depois de o Ctrl + F ou F3 e você devera procura por:
]]></b:skin>
Depois que você acha o código a cima você devera copiar o código abaixo e colara EM CIMA do código citado a cima.
 /*- Inicio do Menu stripe por Prince Teen -*/
MenuStripe{
background: #d2bca7; /*- COR DO FUNDO -*/
border-left: 2px solid #6b4a2c; /*- COR DA BORDA -*/
padding: 3px;
color: #FFF; /*- COR DA LETRA -*/
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
font-size: 11px;
float: left;
margin: 2px;
cursor:crosshair;
width: 44%;
}
MenuStripe:hover{
background: #b1d4b3; /*- COR DO FUNDO EM HOVER -*/
text-align:center;
border-left: 5px solid #35ac3e;  /*- COR DA BORDA EM HOVER -*/
-webkit-transition-duration: 1s;
}
/*- Final do Menu stripe por Prince Teen -*/
 Acho que não tenho nada para explicar pois o código todo já vem explicando para que serve. Você deve alterar só aonde estiver negrito, as outra parte não precisa ser alterada. Depois de ter alterado o que precisava salve.
Depois de salvado, você devera ir em Layout > Devera clica em Adicionar um Gadget > e procura e clicar em HTML/JavaScript e você devera colocar esse código:
<a href="LINK"><menustripe>NOME</menustripe></a>
<a href="LINK"><menustripe>NOME</menustripe></a>
<a href="LINK"><menustripe>NOME</menustripe></a>
<a href="LINK"><menustripe>NOME</menustripe></a>

Nenhum comentário:

Postar um comentário