22.1.13

Menu Wishlist


 Fico feliz que bastante gente participou do joguinho. Pretendo fazer coisas assim mais vezes aqui no blog. É até mesmo um meio de descontrair e quebrar aquela hegemonia dos tutoriais e utilitários. Peço desculpas por não ter postado ontem, mas além de ficar tentando fazer o tutorial de hoje, me distraí com um jogo que a Kaorii postou lá no KW.

Sem mais enrolação, hoje eu trouxe um menuzinho com efeito wishlist que fiz. Ele é simples, mas acho que fica bom usando como status ou na página de tutoriais. Eu tentei fazer a Live Preview como costumo, em uma página própria, mas dessa vez não deu certo porque o menu ficava no tamanho da página toda, e muito esquisito. Assim, pus no blog de testes mesmo.

Preview




Vá no seu HTML e procure por ]]></b:skin> e acima dessa tag cole:


.menuzinho {
height: 12px; /*altura*/
border-left: 8px solid #FF0040; /*borda*/
overflow: hidden;
display: block;
margin: 3px; /*espaçamento*/
border-radius: 5px;
background: #f2f2f2; /*cor do fundo*/
color: #909090; /*cor da letra*/
text-align: left; /* posição do texto*/
font-family: tahoma; /*fonte*/
font-size: 12px; /*tamanho da letra*/
padding:4px;
padding-left: 15px;
text-shadow: 1px -50px 1px #CACACA, 1px 50px 1px #CACACA, 1500px 1px 0px #CACACA, -900px 1px 0px #CACACA; /* sombra do texto*/
}

.menuzinho:hover {
border-left: 12px solid #FF0040; /*borda*/
background: #f2f2f2; /*cor do fundo quando passa o mouse*/
box-shadow: inset 2px 2px 2px #ddd; /*sombra interna quando passa o mouse*/
-webkit-transition-duration: 0.9s;
padding: 4px;
padding-left: 18px;
text-shadow: 1px 0px 1px #CACACA,1px 0px 0px #CACACA,1px 1px 0px #CACACA, 1px 1px 0px #CACACA; /*sombra do texto quando passa o mouse*/
}

Está tudo explicado entre /* e */. Depois adicione um gadget de HTML/Javascript e cole:


<div class="efeitozinho">Algo aqui</div>
Cole isso no mesmo gadget quantas vezes você quiser que apareça.

Espero que tenha sido útil o tutorial. Beijos♥

19 comentários:

  1. Amei o menu *---*

    http://confissoes-de-um-garoto.blogspot.com.br/

    ResponderExcluir
  2. Já votei. E adorei esse menu *u*
    Tive que reinstalar meu chrome, dai perdi todos os favoritos... Vou salvar é tudo no pc mesmo agora >.< Talvez eu o use no futuro! Beijo.

    Diva Pensante (perfil)

    ResponderExcluir
  3. Adorei esse menu Wishlist, muito fofo. :3

    Zombie World ~> PERFIL

    ResponderExcluir
  4. Amei ele c:
    Vou usar em meu próximo layout hehe
    Beijos >.< Good Lollipop

    ResponderExcluir
  5. Legal o tuto flor *-*
    http://perfeitateen.blogspot.com.br/

    ResponderExcluir
  6. Oi *-* Aceita afiliação?
    Aguardo a resposta lá no blog.
    http://beoneprincess.blogspot.com.br/

    ResponderExcluir
  7. Adorei o menu, super lindo :3
    Aceita afiliação amore?
    Beijos, Morangos Silvestres

    ResponderExcluir
  8. Muito perfeito o menu, já guardei-o nos favoritos :3 Acho que usarei em algum layout, acho que ficaria lindo nos marcadores, né?

    Plush Things ♥

    ResponderExcluir
  9. Adorei o blog, muito lindo, amei tudo. Parabéns mesmo, vou sempre estar aqui (:

    ontendency.blogspot.com

    ResponderExcluir
  10. Amei o efeito, eu achei perfeito super elaborado *u*
    Vou salvar aqui nos favoritos pra usar algum dia!
    Beijos

    BANGTEEN.BLOGSPOT.COM

    ResponderExcluir
  11. Ai que fofo :3 Eu estive procurando menu wishlist agora mesmo *3*

    seguindo ♥ cafe-chaud.blogspot.com.br

    ResponderExcluir
  12. Adorei o efeito! Com certeza fica ótimo para o status!

    Beijos

    http://blog-geekchic.blogspot.com.br/

    ResponderExcluir
  13. Adorei o tutorial, o efeito fica lindo!
    Beijos,
    isaloy.blogspot.com.br
    blog-pequenaprincesa.blogspot.com.br

    ResponderExcluir
  14. Que bunitinho ^-^ adorei o tutorial! alias, vendo seu blog de testes, eu amei todos os efeitos que estão lá na sidebar D: Meudeus, vou procurar por eles... OLHA O CROSSED QUE LINDO! kkkkk

    www.tortademenina.com

    ResponderExcluir
  15. Oi tudo bem? Espero que sim,estava procurando alguns blogs e amei o seu! Suas postagenes são maravilhosas,você escreve muito bem e tem um talento para ser blogueira! Eu adorei todo o seu layout,é muito organizado e suas postagens são bem explicadas! Se continuar assim vai muito longe! Você é talentosa e eu adorei tudo aqui,pessoas como você merecem ser reconhecidas! Adorei muito.
    Não sei se você se lembra de mim,mas eu sempre vinha por aqui. Fiz outro blog,o Amiga que fashion! Eu já te seguia,caso queira retribuir eu iria adorar! Muito obrigada e parabéns!
    Beijos,
    Amigaquefashion.blogspot.com

    ResponderExcluir
  16. Olá tem tag para você lá no blog

    Beijos

    http://blog-geekchic.blogspot.com.br/2013/01/tag-11-coisas.html

    ResponderExcluir
  17. Que fofinho, gostei muito! Tuto muito bom ^^
    Sonhos de Mel
    -M

    ResponderExcluir