3 de fev de 2013

Pedido: Menu Pisca-Pisca

Hey, angels :) What's up?

Ontem recebi um pedido de tutorial:


E, obviamente, eu não iria deixar de atender uma leitora! Portanto, se quiserem ver como fazer o menu que uso no Mrs. Nightshade, é só continuar lendo.

Gostei bastante do efeito desse menu, é bem diferente.

A primeira coisa a se fazer, é ir em Modelo > Editar HTML.
Usando Ctrl + F, busque pela tag ]]></b:skin> . Assim que encontrar, cole o seguinte código ANTES:
/* Menu Pisca-Pisca - by: Danii Deutscher */
@-webkit-keyframes piscapisca {
from {-moz-opacity: 0; opacity: 0;}
to {opacity: 100; -moz-opacity: 100;}
}
@-moz-keyframes piscapisca {
from {-moz-opacity: 0; opacity: 0;}
to {opacity: 100; -moz-opacity: 100;}
}
@-o-keyframes piscapisca {
from {-moz-opacity: 0; opacity: 0;}
to {opacity: 100; -moz-opacity: 100;}
}
mn {background: #00CED1; color: #fff; display: inline-block; padding: 5px; text-align: center; font-variant: small-caps; text-transform: lowercase; font-weight: bold; cursor: pointer; font-family: 'Verdana'; font-size: 11px;}
mn:hover {-webkit-animation-name: piscapisca;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
-moz-animation-name: piscapisca;
    -moz-animation-duration: 0.2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
-o-animation-name: piscapisca;
    -o-animation-duration: 0.2s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;}
Edite apenas as partes que coloquei em negrito, que são as cores do menu. Faça isso usando a Tabela de Cores ou a paleta que desejar.
Para o menu aparecer, é só adicionar um gadget de HTML/Javascript e colocar o código abaixo nele:
<a href="URL da página"><mn>Nome da Página</mn></a>
Substitua e altere como o mandado. Para adicionar mais links é só ir repetindo.
Pronto! Super fácil, não é?
Aprendi com ajuda do blog Adolescente Nerd, então créditos dados.

Por hoje é só.
Beijos,

Mrs. Nightshade.

5 comentários:

  1. eu nao conhecia esse tutu, achei muito lindo o menu, acho q gosto mais desse menu do q esse aqui do blog de tutus do Mrs Nightshade!
    Beijokass
    Fer --> RetardadasDaNet.blogspot.com

    ResponderExcluir
    Respostas
    1. Awwwwn, fico muito feliz :D Que bom que gosta *---* Acho que aquele combinou mais com o estilo de layout ♥ Esse que uso aqui é bem simples, era disso que precisa: algo pequeno e que combinasse com tudo ♥ kkk

      Beijos!

      Excluir
  2. Respostas
    1. Fico feliz em saber :3 Credite a mim e ao AN,tudo bem? ;)

      Beijos!

      Excluir