• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

5 de fevereiro de 2013

[Pedido] Menu Bounce + Imagens para o menu

Tumblr_m0t67j9say1qj7s2ho1_500_large
Olá cogumelos adocicados com chocolate de arco íris!
Bem, primeiro quero agradecer à vocês, porque o número de comentários aqui no blog vem aumentando, bem, no nosso primeiro post desde que abrimos o blog, temos 63 comentários, e isso me deixa bem alegre, queria também avisar que agora temos uma ask no blog, para vocês pedirem as postagens, antes vocês pediam pelo formulário, mais agora temos uma ask, o que facilita de ver as mensagens, clique aqui e peça a sua.

Queria avisar também que eu e a Hannah acabamos de concluir o chocomapa, ou seja, a página com todos nossos posts (tutoriais, goodies e etc..) já está totalmente completa, clique aqui para vê-la.

Hoje trouxe um tutorial pedido pela Amanda, dona do blog Nerds Feras de como fazer o menu que usamos no layout passado, conhecido como menu bounce.

Cole antes de ]]></b:skin>:


#posiciona{position:absolute; margin-left: 100px; margin-top:10px; width:800px;}

.home{background: url('http://i.imgur.com/LhH4D.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.home:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}}
.ask{background: url('http://i.imgur.com/gsruL.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.ask:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-30px);}
60% {-moz-transform: translateY(-15px);}
}
.about{background: url('http://i.imgur.com/B9wtB.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.about:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.ext{background: url('http://i.imgur.com/QIrEF.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.ext:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-30px);}
60% {-o-transform: translateY(-15px);}
}
.tem{background: url('http://i.imgur.com/x7I6e.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:1px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.tem:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}

Calma, o código é enorme assim, mais as únicas coisas a serem personalizadas são as imagens que estão em negrito.
Está vendo a parte roxa do código? aí que vocês irão personalizar para posicionar o menu em seu layout.

Cole isso em um HTML / Javascript:


<div id="posiciona"><a href="link" class="home"></a><a href="link" class="ask"></a><a href="link" class="about"></a><a href="link" class="ext"></a><a href="link" class="tem"></a></div>


E aqui como prometido no título do post, imagens para o menu:









Espero que tenham gostado do tutorial de hoje, relembrando, créditos totais do menu para o www

Beijos de caramelo!

47 comentários:

  1. Muito fofo esse menu, adorei :3 E as imagens estão super lindas! Obrigada pela afiliação, você também já está na elite!

    Beijos <3
    crazyforhtml.blogspot.com

    ResponderExcluir
  2. *o* b-a-b-e-i vou colocar no blog da minha best :) Vou por os créditos não se preocupe!
    Kisses, Laura C. from ~> Adolescente Virtual

    ResponderExcluir
  3. Acho muito Lindo esse menu *u*
    Kissus ~ Good Lollipop

    ResponderExcluir
  4. Que lindas as imagens para o menu ^0^ O menu tbm me agrada ;3
    Kissus~
    cotidianodeumabarbie.blogspot.com

    ResponderExcluir
  5. Obrigada por postar o tutorial.
    E parabéns pelo novo layout, tão perfeito quanto os anteriores *-----------*

    ResponderExcluir
  6. Ja utilizei ele num layout free, mas deu uns errinhos. Obrigada por postá-lo! Sabe se tem como por isso no cabeçalho?

    Beijos
    Too Kawaii

    ResponderExcluir
    Respostas
    1. claro que tem flor é só personalizar o código: #posiciona{position:absolute; margin-left: 100px; margin-top:10px; width:800px;}
      e ir editando, até posicionar direitinho no cabeçalho, e se não der certo isso, use o nosso tutorial de gadgets no cabeçalho: http://adolescentenerd.blogspot.com.br/2013/02/pedido-gadgets-no-cabecalho-seguidores.html

      espero que consiga ^^

      Excluir
  7. Adorei o tutorial ! Já Salvei nos meus favoritos!!
    Esse layout esta P-E-R-F-E-I-T-O xonei~
    Bjs
    Fiquem com Deus
    Daily-whin.blogspot.com

    ResponderExcluir
  8. Caramba, o código é ENORME mais o menu fica suuuuper fofo, adorei :3
    # Beeijos >> crystal-slipper.blogspot.com

    ResponderExcluir
  9. Boa noite. E venho dizer uma coisa e espero que ninguém me leve a mal

    A Shiro ( a dona do brandnewancient.blogspot.com) comentou comigo que vocês colocaram aqui no vosso blogs alguns do icons dela. Apesar de que ela disse que os retiraram, parece que isso não aconteceu. Bom, o caso é que a Shiro ão se importa que as pessoas usem os icons. Afinal, foi para isso que ela os disponibilizou. O caso é que os icons, assim como qualquer gráfico que exista no BNA é apenas para uso pessoal.

    A Shiro não sabe falar português, e por isso pediu-me para lhes dar este recado:

    Ela quer que qualquer icon que vocês tenham publicado no vosso blog seja retirado. Os icons dela, assim como qualquer gráfico publicado no BNA é apenas para uso pessoal. Desculpem se estou a ser um pouco grosseira, mas acho que não há outra forma de falar isto.

    Enfim, se puderem fazer isso, a Shiro estaria eternamente grata. (E eu também).

    Até.

    ResponderExcluir
    Respostas
    1. Respondi lá no blog assim:
      espanhol: Hola, he venido aquí para hablar de un comentario que recibí en mi blog allí, y no fue usted quien dijo que así no era en realidad la primera entrada de Andrea arriba.
      Bueno, no sé si estoy escribiendo porque estoy correctamente Río y estoy traduciendo mi comentario al español por traductor google.
      Más vino a hablar a retirar su icono, pero algunos, esto es lo que yo sabía, y no recuerdo haber ido a su blog en caso de no Aguma sé si fue uno de mis postadoras ...
      Le pido una aclaración sobre lo que el post, así que puedo dibujar bien, no quiero ser deshonesto sin blog, por lo que pido que si es posible me diga qué publicar, voy a retirar lo que sabía ^ _ ^

      Português: Olá, vim aqui falar sobre um comentário que recebi lá no meu blog, bem não foi bem você quem comentou lá, na verdade foi a Andreia do primeiro post acima.
      Bem, eu não sei se estou escrevendo corretamente pois eu sou carioca e estou traduzindo meu comentário para o espanhol pelo google tradutor.
      Mais vim falar que retiraria sim algum icon seu, isso se eu soubesse quais são, e também não lembro de ter visitado seu blog em hipótese aguma, não sei se foi uma de minhas postadoras...
      Peço para que esclareça mais ou menos qual é o post, para que eu possa assim retirar, não quero ser desonesta com nenhum blog, então peço que se possível me fale qual a postagem, irei retirar assim que soube ^_^

      Espero que entendam e me dê uma resposta :)

      Excluir
  10. Ameeeei o tutorial!
    Super amei as imagens pro menu *o*

    Beijão <3
    http://porckybunny.blogspot.com.br/

    ResponderExcluir
  11. Amei o tutorial! Seguindo! Irei usar!

    Aqui meu blog é novo pode seguir? Obrigada!
    http://doacoesdefotos-fakes.blogspot.com/

    ResponderExcluir
  12. Que lindinhoo! Muito fofinho esse menu, não é o estilo do meu blog, mas acho que fica lindo nos blogs com gadgets tipo seguidores e slide no cabeçalho, bem o estilo deles hahah, tipo o seu. Acho lindo :)
    Beijos ♥
    Sim Senhorita (Clique aqui ou no perfil)
    @anaazista

    ResponderExcluir
  13. Ai que menu cute me deu até vontade de fazer um layout para que eu usasse ele, ameii seu blog flor achei super fofo o layout e ja estou seguindo.

    ~Beijos

    crazy--designer.blogspot.com.br

    ResponderExcluir
  14. Amei,to querendo mudar o lay la do blog e se eu usar esse menu vou vim buscar as imagens aqui *-*
    Beijos
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir
  15. Muito bacana este menu !
    http://kawwaii-land.blogspot.com.br/

    ResponderExcluir
  16. http://quaseprincipa.blogspot.com.br/2013/02/capricha-meu-blog.html veja

    ResponderExcluir
  17. ah, menus de tumblr, quase sempre perfeitos com seus efeitos extraordinários e afins. O que complica bastante é na hora de passar pro blogger. Já olhei a sua postagem explicativa e a do KW também mais ainda há algumas excessoes. Pode atualizá-la com outros exemplos? bezzo, sarah
    http://svt-pistache.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. vdd, mais querida, acho que ensinei direitinho né...pelo menos eu acho...qual parte você entendeu, se quiser explico ^_^

      Excluir
  18. megan o blog só foi desativado por um mês é que eu estava viajando :S mais eu tô de voolta ! rçrçrçrçrçrçrçrççr]

    ResponderExcluir
  19. Gosto muito do efeito desse menu, é muito lindo ^^

    Beijos :*
    pequena-julieta.blogspot.com
    Hey... abri vagas para postadora! Se quiser se inscrever, dá uma olhadinha lá :)

    ResponderExcluir
  20. adoreiii!!
    você é 10 nesse assunto hein?!!!
    parabéns pelo blog!!

    beijinhos
    http://www.euvejotudocorderosa.com

    ResponderExcluir
  21. Que post útil! Adorei seu blog, realmente muito incrível, tem tudo para fazer o maior sucesso; Já estou seguindo, segue o meu também?
    www.espacegirl.com

    ResponderExcluir