9 de jan de 2013

Menu Agitated

Olá anjos! Boa tarde!

A Lucy estava falando comigo que não sabe passar códigos do Tumblr para Blogger, então eu pensei um pouco e talvez mais tarde eu faça um tutorial ensinando a passar.
Enquanto fazia alguns testes, passei um código para blogger que é  Menu Agitated, do Tumblr Single Themes. Ele é um menu e fica mais legal embaixo do cabeçalho, mas vocês podem usar onde quiser.
Veja um preview aqui.
1-Cole o seguinte código acima de <head>:
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/>
Essa é a fonte do menu, troque por outra se quiser.

2-Feito isso, cole o seguinte código 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: #fe579c; /* Cor de fundo do menu */
padding: 2px;
text-align: center;
text-transform: uppercase;
border-radius: 5px;
color: #fff; /* Cor da fonte */
cursor: pointer;
text-shadow: 2px 2px 0px #e9508f; /* 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;}


A explicação está no próprio código. Mude como quiser.

3-Depois cole um Gadget de HTML/JavaScript, o seguinte código:

<a href="/"><mn>Home</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>

Esse é o código do menu, mude as partes em negrito, caso queira acrescentar ou tirar um link é só copiar e colar a última linha novamente.

Espero que seja útil!

Um comentário:

  1. É muitooo lindo!
    Mas se o layout já estiver muito elaborado, não fica legal.

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!