7 de nov de 2012

Tutorial: Menu Out


Hey todo mundo!

Hoje eu vim ensinar para vocês a fazer um menu fofo e super delicado! Esse é meu segundo primeiro post! Vamos lá? 

Veja o menu aqui
Gostoou? Então leia abaixo!


Vá no seu painel do blogger→ clique em modelo→ prosseguir→ aperte Ctrl + F, no campo em branco digite ]]><b:skin ]
Acime desse texto procurado, cole o seguinte código:

Mude somente o que estiver em negrito!
menu {width: 100px; font-size: 15px;  font-family:'Stars From Our Eyes'; color: #fff;float:left;  letter-spacing:1px; text-align:center; margin:2px;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;-webkit-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px); }
.menu:hover {-webkit-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);}
/** Fonte personalizada **/
@font-face {font-family: 'Stars From Our Eyes';src: url('http://static.tumblr.com/mmrynko/17Dm6e4ef/starsfromoureyes.ttf') format('truetype'); font-weight: normal; font-style: normal;}
Entendendo o código  
Width equivale a largura do menu.
Font-size ao tamanho da fonte do menu.
Font-family é a fonte do menu. Se você não quiser essa, mude e apague de /**Fonte Personalizada **/ até o final.
Color é a cor do menu.
Float: left é o alinhamento, no caso está a esquerda. Pode por Rigth tamb

 Agora é só ir em Adicionar gadget >> Java/Script e colar:


<a href="link" class="menu"> <div style="COLOR: #fff;">Home</div></a>
Beijos


Créditos ao blog Garota do Olhar Sincero e ao Kawaii World

18 comentários:

  1. Ammeii o tutorial, talvez use no meu proximo layout, vou ate colocar nos favoritos kk rsrs' mre você pode seguir meu blog? estou te seguindo obrigada bjks

    http://blacktoopink.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. A Miih é uma fofa mesmo né? Ela está começando aqui postando coisas ótimas'
      Claro que eu sigo seu blog

      -Kaahwii

      Excluir
  2. Aiin, esse menu é muito divo!

    omeubrilhantemundo.tk

    ResponderExcluir
  3. Ahhhh! Esse menu é demais e há tempos que queria saber como fazer. Mas parece meio difícil, né? Vou tentar :B

    garota-queen.blogspot.com ♥

    ResponderExcluir
    Respostas
    1. Pois agora você achou no lugar certo ;]
      Não é difícil amor, só prestar atenção'
      Beijos

      Excluir
  4. Adorei o menu <3

    #bezoos~~> perfeitosmile.blogspot.com

    ResponderExcluir
  5. Que lindo esse menu. Vou tentar colocar ele no meu blog *-*

    Beijos,
    modicesdemenina.blogspot.com

    ResponderExcluir
    Respostas
    1. Coloca, seu blog já é lindo e com esse menu vai ficar muito meigo t-t

      Excluir
  6. Esse menu e muito lindo.
    Flor, p/ aparecer p/ perguntar anonimamente na ask so precisa aumentar aquela caixinha no headings, pelo que ue me lembre, se nao for e no outro (: E isso, so precisa aumentar!

    Xoxo, Melissa :*
    doucelamour-oficial.blogspot.com.br

    ResponderExcluir
  7. TO seguindo o seu blog.Amei.
    Segue de volta?
    http://funsttar.blogspot.com.br/

    ResponderExcluir
  8. O menu é liindo, feio é copiar o tutorial do Kawaii World e não creditar... :/
    Beijos, Garota do Olhar Sincero

    ResponderExcluir
  9. Esse menu é tudo !
    Só não coloco lá no blog porque já tenho o meu :c
    Mas qualquer coisa eu coloco c:
    Obrigado pela visita lá, beijos ;**
    Seguindo c:

    ResponderExcluir
  10. esse menu é diwo, já vi ele em algum lugar que não me lembro, mas agora vai pro meu "arquivo de menus que eu pretendo usar" '-'
    ele acho que vai entrar no meu próximo layout... Quem sabe? bezzo, sarah
    http://svt-pistache.blogspot.com.br/

    ResponderExcluir
  11. Ficou lindo !!! Mas pera ai, é pra tumblr , ou pra blogger? #duvida

    the-zombieworld.blogspot.com
    Becky Nunes/ Andy Assis

    ResponderExcluir
  12. Que lindo menu! Acho que usarei no meu próximo layout, rs.
    Estou seguindo aqui com o meu blog novo, adoraria se pudesse dar uma passadinha lá e seguisse.
    Obrigada desde já e ótimo feriado.
    Gabi Andrade xx

    littlethings-br.blogspot.com

    ResponderExcluir
  13. Passando aqui para visitar minha fofa afiliada! Amei o tuto!!! Beijos

    XOXO ♥

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

    ResponderExcluir

Você é livre pra comentar e eu agradeço,mas se for criticar também é bem-vindo,mais sua critica deve ser bem elaborada, se seguir o blog eu vou seguir de volta, é só pedir. E claro que eu vou retribuir os comentários.

By: Kaah. L e Yanca.M