12 de dez de 2012

Tutorial Menu Wishilist

Boa noite, desculpem pelos dias fora estava realmente sem tempo pra postar, estou muito animado com a nossa próxima edição do template apesar do tempo que estou sem para fazer mais acho que até depois do natal já está pronto, então talvez amanhã eu trago o nosso debate semanal. Hoje eu trouxe um tutorial super perfeito é um menu de Wishilist acho que também serve para ser usado como o menu de novidades.
Let's see? 



Preview aqui x
Créditos x

Abra seu HTML e procure por ]]></b:skin> cole um dos códigos acima da tag procurada.

Se você escolheu o efeito Arrow Wishlist:
/** ARROW WISHLIST **/ .wishlist1 {color: #fff; background: #1c1c1c url('http://static.tumblr.com/gy4zz8m/0Zvma1y0y/seta.png') no-repeat; font-family: verdana; font-size: 9px; line-height: 9px; padding: 5px; padding-left: 20px; margin-top: 1px; margin-bottom: 2px; text-align: left; -webkit-box-shadow: inset -2px -2px 3px #e8e8e8; box-shadow: inset -2px -2px 3px #141414; -moz-box-shadow: inset -2px -2px 3px #e8e8e8; transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s;} .wishlist1:hover {color: #fff; padding-left: 30px; transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s;}
 Se você escolheu o efeito Border Wishlist:
/** BORDER WISHLIST **/ .wishlist2 {margin-bottom: 2px; background: #1c1c1c; padding: 2px 1px 2px 5px; border-left: 5px solid #282b42; border-right: 5px solid #282b42; transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s; color: #fff; text-align: left; font-family: verdana; font-size:9px; text-decoration: none; -webkit-box-shadow: inset -2px -2px 3px #e8e8e8; box-shadow: inset -2px -2px 3px #141414; -moz-box-shadow: inset -2px -2px 3px #e8e8e8; line-height:15px;} .wishlist2:hover {border-left: 20px solid #282b42; border-right: 20px solid #282b42; transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s;}
Se você escolheu o efeito Magic Wishlist:
/** MAGIC WISHLIST **/ .wishlist3 {color: #fff; background: #1c1c1c no-repeat; font-family: verdana; font-size: 9px; line-height: 9px; padding: 5px; padding-left: 5px; margin-top: 1px; margin-bottom: 2px; text-align: left; -webkit-box-shadow: inset -2px -2px 3px #e8e8e8; box-shadow: inset -2px -2px 3px #141414; -moz-box-shadow: inset -2px -2px 3px #e8e8e8; transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s;} .wishlist3:hover {padding-left: 30px; -webkit-transform: skew(90deg, 1deg); -moz-transform: skew(90deg, 1deg); -o-transform: skew(90deg, 1deg);}
.wishlist3 k{color: #282b42; padding-right: 3px;}
 O seguinte código você vai colar em um gadget JAVA.

Se você escolheu o efeito Arrow Wishlist:
<div class="wishlist1">Exemplo rs</div> <div class="wishlist1">Exemplo rs</div> <div class="wishlist1">Exemplo rs</div> <div class="wishlist1">Exemplo rs</div> <div class="wishlist1">Exemplo rs</div> <div class="wishlist1">Exemplo rs</div> <div class="wishlist1">Exemplo rs</div> <div class="wishlist1">Exemplo rs</div> <div class="wishlist1">Exemplo rs</div> <div class="wishlist1">Exemplo rs</div>

 Se você escolheu o efeito Border Wishlist:
<div class="wishlist2">Exemplo rs</div> <div class="wishlist2">Exemplo rs</div> <div class="wishlist2">Exemplo rs</div> <div class="wishlist2">Exemplo rs</div> <div class="wishlist2">Exemplo rs</div> <div class="wishlist2">Exemplo rs</div> <div class="wishlist2">Exemplo rs</div> <div class="wishlist2">Exemplo rs</div> <div class="wishlist2">Exemplo rs</div> <div class="wishlist2">Exemplo rs</div>
 Se você escolheu o efeito Magic Wishlist:
<div class="wishlist3">Exemplo rs</div> <div class="wishlist3">Exemplo rs</div> <div class="wishlist3">Exemplo rs</div> <div class="wishlist3">Exemplo rs</div> <div class="wishlist3">Exemplo rs</div> <div class="wishlist3">Exemplo rs</div> <div class="wishlist3">Exemplo rs</div> <div class="wishlist3">Exemplo rs</div> <div class="wishlist3">Exemplo rs</div> <div class="wishlist3">Exemplo rs</div>
Use como quiser, credite (=

6 comentários:

  1. A que lindos todos ^^
    Adorei (: o 2 é mais bonito u-u

    ResponderExcluir
  2. São lindos adorei *-* eu achei o 2 o mais legal :)

    ResponderExcluir
  3. ameei, na verdade tudo aqui é lindo , o lay é perfeito não ,
    mais do que perfeito maravilhoso ! concurso la no blog participa ?? http://justadream-oficial.blogspot.com.br

    ResponderExcluir