Menu agitated

Olá meus fofuchos (◕‿◕✿). Tudo bem com vocês? Eu estou ótima. Não vejo a hora das férias chegarem, eu realmente preciso de um descanso e de mais tempo para o blog. Eu tenho ainda alguns trabalhos pra entregar, mas as férias começam semana que vem (todos bailam~). Ontem eu fui ao trabalho da minha mãe e me senti na Coreia, sério. A maioria dos habitantes que vivem lá são coreanos ou mestiços, tanto é que até os rótulos dos alimentos estão escrito em japonês e coreano, um sonho.

Hoje eu estava visitando os blogs (como sempre) e eu vi um menu super lindinho no Chá com Anjos. Na verdade a Mari passou o código dele para o padrão do blogger, já que ele é original do tumblr Single Themes [créditos a ambos]. Ele é um menu bem simples e é pra ser usado acima ou abaixo do cabeçalho, como preferir. Sei que muita gente prefere os menus de sidebar e tals, mas de qualquer forma, decidi posta-lo aqui no Rouge Crazy, não custa nada, né?~(Preview)~(Termina a linha logo, tia!)
Primeiramente, no seu HTML procure por: <head>
Depois de achar, cole o seguinte código acima da tag procurada.
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/>
Agora procure por ]]></b:skin> e cole acima dele o seguinte código:
/*********** 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;}
Depois de salvar, vá no layout do seu blog e adicione um novo gadget Java/Script  com o seguinte código:
<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>
Depois de modificar o que está em negrito, salve e visualize. Beijos

Nenhum comentário:

Postar um comentário