sábado, 12 de janeiro de 2013

Menu Grow + Ask

Boa Tarde!
Na última postagem fiz uma enquete para vocês, meus leitores, escolher o próximo tema do post, o os mais votado foi tutoriais, então estou aqui para atender os pedidos. Como vocês escolheram tutoriais e uma leitora me pediu para mim trazer um tutorial de menu na horizontal, juntei os dois pedidos em um só.
 (No próximo post trarei o segundo mais votado que no caso foi Avatares).
O Menu ficara assim:


Uma novidades, resolvi colocar um Ask aqui no blog, porque assim, vocês podem me mandar suas sugestões de post. Conto com vocês, mandem suas sugestões! 



Vá até Modelo  Editar HTML  aperte Ctrl + F e procure por: <head> e cole esse código abaixo.
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'/>

Depois, Procure por: ]]</b:skin>  E logo acima cole o código abaixo:
grow {

font-family: 'Oregano', cursive;
font-size: 30px;
display: inline-block;
color: #fff;
margin-top: 25px;
margin-left: 15px;
text-shadow: 0px 0px 3px #fff;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
grow:hover {
-moz-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1.3) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
text-shadow: 0px 0px 7px #fff;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Agora, para usar o menu é só ir em  Layout  Adicionar um Gadget  adicione o gadget HTML/Jasvascript, e cole o código abaixo:
<center>

<div id="box">
<a href="LINK"><grow>Nome</grow></a>
<a href="LINK"><grow>Nome</grow></a>
<a href="LINK"><grow>Nome</grow></a>
<a href="LINK"><grow>Nome</grow></a>
<a href="LINK"><grow>Nome</grow></a>
<a href="LINK"><grow>Nome</grow></a>
</div>
</center>
Esta pronto o menu, não esqueça de clicar em visualizar, e se estiver tudo ok, clique em salvar.

Créditos ao Explodindo Glitter

Espero que tenham gostado. Ah não esqueça de fazer sua sugestão no ask.
Beijos !









13 comentários:

  1. Éee lindo o efeito *--*

    Beijos :)
    pequena-julieta.blogspot.com

    ResponderExcluir
  2. Oi linda seu blog e muito fofo adorei - Tem como você dar uma passadinha no meu comecei agora mais gostaria de sua visitinha , agradeço desde já http://1poucoderebeca.blogspot.com.br/ Beijos

    ResponderExcluir
  3. O tutorial é muito bom, e o efeito fica lindo. Amei o seu blog, muito fofo, seguindo ele, segue de volta?

    http://newsdayoff.blogspot.com.br/

    ResponderExcluir
  4. Este menu e lindo ...
    Facil e tutu

    Ask -> http://ask.fm/Girlenevr
    Blog ~> http://blog-meninasmalucas.blogspot.com.br/

    ResponderExcluir
  5. Adoreiii a dica (:
    vou tentar !
    segue o meu se puder:
    nossoblogdemodaa.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou ^^ Tenta sim e depois me conta.
      ~Beijos

      Excluir
  6. Olá flor, to bem e você?
    Que bom que gostou ^^ Vou dar uma passada lá
    ~Beijos

    ResponderExcluir