Efeitos Wishlist

01/10/2012
Oi coisas lindas da tia, visita meu weit ? 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>

14 comentários

  1. OMG que lindos esses menus Meu Deus.Vou salvar o post aqui nos meus favoritos pra usar em algum dos meus lays.
    Beijos...
    bangteen.blogspot.com

    ResponderExcluir
  2. Que liindos *-*
    Pena que eu já arrumei o novo lay do blog, se não eu colocaria. Mais vou salvar aqui pra colocar no próximo lay rs' (:

    Bezoos :3
    mundoo-cute.blogspot.com.br/

    ResponderExcluir
  3. Muito legal esses efeitos, nunca tinha visto antes. Nem em tumblr kk
    bjoos

    mundoodasblogueiras.blogspot.com.br/

    ResponderExcluir
  4. Obrigado pela visita no blog! volte sempre! seu blog tbm é super organizado e bem interessante ja favoritei! iricardodesigner.blogspot.com *-* kissus.

    ResponderExcluir
  5. Essa pág. já taaaaar nos meus favoritos pra eu usar no próx lay
    (Clica no nome para ir no perfil baby ;3,beijos perfumados com mamãe e bebe <3)

    ResponderExcluir
  6. Gostei bastante do primeiro, o efeito fica bem legal!
    victory-blog1.blogspot.com.br

    ResponderExcluir
  7. Tive que encaixar o segundo efeito, é muito perfeito!

    HistoriaAgridoce|blogspot

    ResponderExcluir
  8. Muuuuuuuuuito show o menu ! Bom, um template tipo o meu curta uns 35 à 45 reais mesmo (:

    Beijos,
    the-lovers-official.blogspot.com
    portifolio-lary.blogspot.com

    :3

    ResponderExcluir
  9. *O* Amei os efeitos .Tem vaga sim!Já linkei você.

    corderosa|tk

    ResponderExcluir
  10. floor,ja pus seu nome lá,vc q pediu a divulgação

    ResponderExcluir
  11. AMEI e tipo o 3º efeito é bombastico perfeitamente divino kkkkk,adoreei,acho que eu vou usar ele no meu proximo layout :3

    behind-the-paris.blogspot.com

    ResponderExcluir
  12. Muuito liindoooos os menus. Pena que não dá mais tempo de usar, já fiz todo o layout. Mas acho que muita gente vai usar, com certeza! Seguindo aqui flor *--*
    Dia 26/9/12 eu criei um blog, e eu ficaria bem feliz se você o visitasse, e se gostar, eu ficaria agradecida se você seguisse. Obrigada!
    nuvensdeframboesa.blogspot.com

    ResponderExcluir
  13. Se eu gostaria de me afiliar?
    rs Claro que sim , é uma honra
    beijos:*

    ResponderExcluir

Retribuo todos os comentários, menos comentários como Seguindo, segue de volta ? ou parecidos, esses NUNCA serão respondidos!
Fora isso fique a vontade para comentar e volte sempre <3