• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

6 de março de 2013

Pedido: Menu Agitaded

Delícia ein
Olá Gente! como vão?! 
Hoje eu irei postar um tutorial que nossa querida dona do blog Kiss Of Gloss pediu, mais antes quero falar que tentarei colocar o layout novo sexta-feira porque quinta tenho de ir à aula de violão então acho que não irei ter tempo para colocá-lo, então acho que irá demorar um pouco mesmo, à menos que eu saia mais cedo da escola, isso seria sorte.

Esse foi o pedido:
Esse é o menu que usamos em nosso layout atual [marrom e rosa] vejam:

Preview on line aqui 
Primeiro quero ressaltar que achei esse menu em um tumblr, mais procurei em tudo e não achei, então procurei o código no HTML do A.N mesmo e trouxe para cá, sendo que depois até que achei no Single temes, então créditos à eles, bem, fiz minhas modificações no tutorial para passá-lo do tumblr para o blog, vamos aprender?


Cole isso acima de ]]></b:skin>:

/*********** Menu Agitated *****************/
/* Animação */
@-webkit-keyframes gangorra {
from {-webkit-transform: rotate(10deg);}
to {-webkit-transform: rotate(-10deg);}
}
@-moz-keyframes gangorra {
from {-moz-transform: rotate(10deg);}
to {-moz-transform: rotate(-10deg);}
}
@-o-keyframes gangorra {
from {-o-transform: rotate(10deg);}
to {-o-transform: rotate(-10deg);}
}
/* Menu */
mn {display: inline-block;
font-family: 'Fjalla One', cursive;
font-size: 25px; /* Tamanho da fonte */
background: #ffffff; /* Cor de fundo do menu */
padding: 2px;
text-align: center;
text-transform: uppercase;
border-radius: 5px;
color: #B03060; /* Cor da fonte */
cursor: pointer;
text-shadow: 2px 2px 0px #DB7093; /* Sombra nas palavras do menu */
width: 90px; /* Tamanho do Menu */
}
mn:hover {
    -webkit-animation-name: gangorra;
    -webkit-animation-duration: .01s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
-moz-animation-name: gangorra;
    -moz-animation-duration: 0.1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
-o-animation-name: gangorra;
    -o-animation-duration: 0.1s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;}

e cole isso em um HTML/ jasvacript para usar o menu:
<a href="LINK"><mn>NOME</mn></a>
<a href="LINK"><mn>NOME</mn></a>
<a href="LINK"><mn>NOME</mn></a>
<a href="LINK"><mn>NOME</mn></a>
<a href="LINK"><mn>NOME</mn></a>
<a href="LINK"><mn>NOME</mn></a>
Espero que tenham gostado do tutorial, é super fácil de personalizar, use essa tabela de cores para facilitar.

Beijos!

14 comentários:

  1. Eu acho esse menuzinho uma graça, ai é só utilizar aquele esquema de por div para arrastar pro cabeçalho? Não sou muito boa em colocar gadgets no cabeçalho, como pode perceber aushuahsash já desconfigurei um tema assim ):

    Mesmo assim, ótimo tutorial, Megan <3
    Beijos
    Too Kawaii

    ResponderExcluir
    Respostas
    1. é, sim, mais dependendo do cabeçalho, podemos só arrastar o gadget para cima no 'layout'

      Excluir
  2. Ai que fofinho esse menu, eu me apaixonei por ele!
    No meu próximo layout eu uso ele!
    Seguindo aqui viu!
    Se puder retribuir, agradeço muito !
    Beijos
    http://sweet-divertido.blogspot.com.br/

    ResponderExcluir
  3. Eu já usei esse menu em um dos meus layouts e era muito fofo, na verdade esse efeito é bem diferente, amores eu já havia pedido afiliação pela página de afiliação mas como a última pessoa que pediu lá foi no ínicio de fevereiro pensei em pedir por aqui também!
    Posso ser afiliada de vocês? Tia Roh Chan do
    http://garotanomundohtml.blogspot.com.br/ Kissus >.<

    ResponderExcluir
  4. Esse tuto é ótimo, vou utilizá-lo no meu próximo lay ^^
    Beijos. Srta Veneno

    ResponderExcluir
  5. Gostei, ótimo tutorial muito útil.
    BEIJOS!

    rarosej.blogspot.com.br

    ResponderExcluir
  6. ameii seu lay amoree *.*

    Gostaria de lhe propor algo , que vs fizesse o lay do meu blog em troca lhe dou divulgação *.* -dizquesim rs'

    Se acaso ficar interessada entra no meu blog e avisa por comentario *.*

    bgs já estou seguindo seu blog !

    http://party-fucking.blogspot.com.br/

    ResponderExcluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
  8. Pago pau por esse menu rsrs' muito estiloso ••http://quaseprincipa.blogspot.com.br/

    ResponderExcluir