26/06/2015

Tutorial: Menu Agitated

||

 Hello! Como vão queridos leitores? Espero que todos bem. Hoje venho trazer o menu Agitated, ele é um menu de topo, como mostro na pagina de review,  me deparei com essa belezinha lá no blog Chá com Anjos. Então se usarem por favor não esqueçam de creditar! Então vamos lá! Se desejar ver o menu basta clicar no link mais abaixo.


1) Escolha o blog qual deseja aplicar, e vá ate seu HTML. Chegando lá ative a pesquisa com o atalho Ctrl+U e pesquise por ]]></b:skin>, acima dele cole:
/*********** 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;}

Salve!

2) Agora vá ate Layout e abra um novo gadget/javascrit, dentro dele cole:
<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>


Se desejar usar a mesma fonte que utilizei no menu, vá em  <head> e acima dele cole:
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/>

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram