Efeitos Wishlist

Oi coisas lindas da tia, visita meu we♥it ? e quem seguir eu dou nutella de morango, ou um prato desse acima, quem quer? hahah. Hoje o tutorial é de menu, tem 3 efeitos diferentes, visualize AQUI, viu ? tem três tipos diferente de menu, os créditos vão para esse tumblr ♥, ele fez e eu adaptei  para blog, se usar credite! Emfim acompanhe o tutorial abaixo conforme o que você escolheu.

Arrow Wishlist

Modelo > Editar HTML e procure por ]]></b:skin> e acima dele cole o código abaixo:

/** 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;}

Depois salve, agora vá em layout >> adicionar um gadget e adicione o gadget HTML/JavaScrip e cole o código abaixo modificando-o como se pede.

<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>

Border Wishlist

Modelo > Editar HTML e procure por ]]></b:skin> e acima dele cole o código abaixo:

/** 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;}

Depois salve, agora vá em layout >> adicionar um gadget e adicione o gadget HTML/JavaScrip e cole o código abaixo modificando-o como se pede.

<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>

Magic Wishlist

Modelo > Editar HTML e procure por ]]></b:skin> e acima dele cole o código abaixo:

/** 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;}

Depois salve, agora vá em layout >> adicionar um gadget e adicione o gadget HTML/JavaScrip e cole o código abaixo modificando-o como se pede.

<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>