23 de nov. de 2012

Menu Whilist

Menu Whilist

Olá hoje eu estarei ensinando um menu chamado Whilist bastante usado para status do blog. É bem simples até, vamos ao Tutorial? 

Demonstração



Primeiro, vá em Design/Modelo > Editar HTML > Ctrl + F e procure por :

]]></b:skin> E quando achar, cole acima:

.wishlist {
background: #eee;
font-family:  Verdana;
font-size: 8px;
margin: 1px;
color: ;
display: block;
-moz-box-shadow: inset 3px 0 0px 0 #C6E68D;
-webkit-box-shadow: inset 3px 0 0px 0 #C6E68D;
box-shadow: inset 3px 0 0px 0 #C6E68D;
padding: 3px 3px 3px 6px;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
.wishlist:hover {
-moz-box-shadow: inset 550px 0 0px 0 #C6E68D;
-webkit-box-shadow: inset 550px 0 0px 0 #C6E68D;
box-shadow: inset 550px 0 0px 0 #C6E68D;
color: ;}
Edite o que está em Negrito, pelas cores que você quer. Agora, adicione um gadget HTML/JavaScript com este código:
<div class="wishlist">TEXTO AQUI</div>
<div class="wishlist">TEXTO AQUI</div>
<div class="wishlist">TEXTO AQUI</div>
Simples não acham ? Espero que tenham gostado, qualquer duvida basta deixar um comentário abaixo.

2 comentários: