Menu Nemuri

 

yahoo, babys como vão vocês? Eu vou muito bem agora que estou fazendo muitos posts para recompensar o mês inteiro sem postar. Tem um menu que tava guardando no meu computador, nem gostei muito dele mas muitas pessoas podem gostar. Não sei se vocês sabem mais eu tenho dois blogs estrangeiros ideia genial né? Um se chama Nemuri Kuma, e o outro annyz kawaii world. Eles são traduzidos para a lingua espanhola e faz sucesso desde 2012. essa ideia veio quando a versão brasileira não tinha muitos acessos e ja que eu morei em caracas na venezuela sei falar espanhol, resolvi fazer esses blogs em 2012 estou ate querendo reatualizalos.
clique em GO para ver o tutorial desse menu.


1 º: Vá ​​para modelo e antes de]]> </ b: skin> cole o seguinte código e salve.

     @ Webkit-keyframes agitado {
     de {webkit-transform: rotate (10graus);}
     para {webkit-transform: rotate (-10deg);}
     }
     @ agitados -moz-keyframes {
     de {-moz-transform: rotate (10graus);}
     para {-moz-transform: rotate (-10deg);}
     }
     @ -O- keyframes agitado {
     de {o-transform: rotate (10graus);}
     para {o-transform: rotate (-10deg);}
     }
     .menu {display: inline-block;
     font-family: "Arial";
     font-size: 14px;
     background: # ff00bf;
     padding: 2px;
     text-align: center;
     border-radius: 5px;
     border: 1px tracejada # 000;
     color: # FFFFFF;
     cursor: pointer;
     text-shadow: 2px 2px 2px # 000000;
     width: 100px;
     text-decoration: none;
     }
     .menu: hover {
     webkit-animation-name: agitado;
     webkit-animation-duration: .01s;
     -webkit-animation tempo-função: linear;
     -webkit-animation iteração-count: infinito;
     webkit-animation-direction: suplente;
     -moz-animation-name: agitado;
     -moz-animation-duration: 0.1s;
     -moz-animação-função de temporização: linear;
     -moz-animação-iteração-count: infinito;
     -moz-animação-direção: suplente;
     ou-animation-name: agitado;
     ou-animation-duration: 0.1s;
     ou-função-animação-timing: linear;
     ou-animação-iteração-count: infinito;
     ou-animação-direção: suplente;
     }

2 º: Vá ​​em design e um novo gadget HTML / Javascript sgte colar. código e salve.

     <- MENU ->
     <div style = "position: absolute; top: -80px; margin-left: 0px; ">
     <a class='menu' href='URL' style='background: #a43ff2;'> CATEGORIA </a>
     <a class='menu' href='URL' style='background: #a43ff2;'> CATEGORIA </a>
     <a class='menu' href='URL' style='background: #a43ff2;'> CATEGORIA </a>
     <a class='menu' href='URL' style='background: #a43ff2;'> CATEGORIA </a>
     </ div>
     <- MENU END ->

Personalize:
Para adicionar outra categoria, adicione o seguinte código antes de </ div>

     <a class='menu' href='URL' style='background: #a43ff2;'> CATEGORIA </a>


     Ok essa parte é minha: style = "position: absolute; top: -80px; margin-left: 0px; "