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);}O seguinte código você vai colar em um gadget JAVA.
.wishlist3 k{color: #282b42; padding-right: 3px;}
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 (=
A que lindos todos ^^
ResponderExcluirAdorei (: o 2 é mais bonito u-u
Vaalew =D
ExcluirSão lindos adorei *-* eu achei o 2 o mais legal :)
ResponderExcluirObrigado =D
Excluirameei, na verdade tudo aqui é lindo , o lay é perfeito não ,
ResponderExcluirmais do que perfeito maravilhoso ! concurso la no blog participa ?? http://justadream-oficial.blogspot.com.br
Obrigado Vou lá conferir hah
Excluir