• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

10 de março de 2013

pedido - Menu Shakes

Tumblr_ln00eyxome1qcntwzo1_500_large
Olá gente, estamos com vários pedidos pela C-box, bem, eu não terei tempo de atender à todos, mas... se quiserem podem pedir por nossa ask ou pelo formulário que fica mais fácil de sabermos ok? atenderei hoje o pedido de nossa querida Lari, ela pediu um tutorial de como fazer esse menu que temos no início do blog.
Preview (x)

No preview ele está um pouco diferente, pois é, pois para fazer o menu, precisaremos de imagens, nesse caso do A.N, usamos esse (x) psd, mais mudamos algumas coisinhas como a cor...rs
Então, primeiramente você terá de fazer as imagens com o nome de cada página que você irá colocar, depois, vamos ao HTML.
Primeiro, cole esse código acima de seu ]]></b:skin>:


@-webkit-keyframes menu { 10% {-webkit-transform: rotate(0deg) scale(1.0) skew(0deg) translate(0px); margin-top:-200px; } }
.menu {border-radius: 0px; margin:px; width:110px;}
.menu:hover {-webkit-animation: menu .49s alternate infinite linear; }

- Depois, simplesmente cole o código abaixo em um HTML / Javascript para o menu funcionar:


<a href="LINK"><img src="http://media.tumblr.com/73d178d285f8a0fbec655f8397841d82/tumblr_inline_mhv2zzf30f1qz4rgp.png"  class="menu"></a>
<a href="LINK"><img src="http://media.tumblr.com/e8268b171a288b2a74c0b88171e31898/tumblr_inline_mhv332IyNb1qz4rgp.png"  class="menu"></a>
<a href="LINK"><img src="http://media.tumblr.com/19d88b1386a5d92b16b4ce63f10cfc61/tumblr_inline_mhv335Ji1p1qz4rgp.png"  class="menu"></a>
<a href="LINK"><img src="http://media.tumblr.com/ea99cdb6a779ff76f65802d31ebd390b/tumblr_inline_mhv34l8l3p1qz4rgp.png"  class="menu"></a>
<a href="LINK"><img src="http://media.tumblr.com/ea99cdb6a779ff76f65802d31ebd390b/tumblr_inline_mhv34l8l3p1qz4rgp.png"  class="menu"></a>
<a href="LINK"><img src="http://media.tumblr.com/97affbdf4ffeef59c7f56a503149788b/tumblr_inline_mhv34pQzhc1qz4rgp.png"  class="menu"></a>

Para facilitar, o código já veio com o link das imagens (em negrito) para que você possa visualizar como fica, mais é claro que se você já fez suas imagens do menu, você irá substituí-las não é?! Espero que tenham gostado do tutorial.
créditos (www)

24 comentários:

  1. Esse menu é bem legal e não é tão difícil de colocar!Beijos
    lembrando-carol.blogspot.com.br

    ResponderExcluir
  2. Eu já tinha visto ele em um tumblr de html, achei muito fofo e no seu blog ficou super lindo, combinou com as cores e com o modelo do lay.. Kissus Roh ;)

    ResponderExcluir
  3. Esse menu é super fofo! *uu* Adoro esses efeitos que "se mechem" AUSHUAS'

    Kissus
    mikicandy.blogspot.com

    ResponderExcluir
  4. Muuuuito lindo
    Beijo, Lili
    Princesa Teen / Visite o blog.

    ResponderExcluir
  5. Amei o blog !Lindo demais !
    Seguindo , retribui ?
    http://modaebelezasdaspattys.blogspot.com.br/

    ResponderExcluir
  6. Muito legal eu acho que no proximo layout eu vou usar ^^

    sense-wonder.blogspot.com.br

    ResponderExcluir
  7. ooi amore , que layout incrivel *.*
    Então gatita mandei mensagem lá pra ti no face , mais tu nem me respondeu amore :s

    ResponderExcluir
  8. Adorei o efeito, ele é bem fofinho.

    ResponderExcluir
  9. Olá, vim aqui para saber se vs aceita ser afiliado do meu blog... ah! e se puder me colocar tbm no seu eu agradeço :) http://dreamstutoriais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Desculpa mesmo queria mais não podemos aceitar pois o número de seguidores é pequeno :/ aain desculpa mesmo..

      Excluir
  10. oi,o lay ta lindo,só vim avisar que no meu pc os gadgets do cabeçalho estão todos fora de ordem.
    hora-de-anime.blogspot.com
    princeofhtml.blogspot.com

    ResponderExcluir
    Respostas
    1. aham sei disso, é que seu monitor é mais pequeno e esse modelo é mínima, para mim aparece normal, tipo, se você aumentar o zoom irá ficar perfeitinho :)

      Excluir
  11. Olá Megan!! Achei o tutorial muito bom e muito útil!!
    Ahh eu queria te avisar que ainda não fiz afiliação com ninguém no meu blog pq ninguém me pediu afiliação ainda mas se vc quiser é só me falar!!

    http://helpindesiign.blogspot.com.br

    ResponderExcluir
  12. Muito bom Megan, sua linda *--* hausau
    Tuto muito, muito útil!

    Make It Shine

    ResponderExcluir