Tutorial - Menu Giratório

Heeeeeey, sexy lady 8D

Como vão pessoal ?

Como eu to postando muitos utilitários talvez fosse legal postar uns tutos de vez em quando não ?

Então hoje eu trouxe um tuto de um menu bem bonitinho,

Que quando você passa o mouse ele tem um efeito giratório onde aparece a palavra que se quer o3o

Tipo isso aqui :

     

Só pra constar as imagens foram tiradas do Kawaii Wolrd.

Então vamos ao tuto o3o

Hey Ho Let's Vamos /o/

1-  Clique em Editar HTML e procure por ]]></b:skin> e acima do código cole :

#menu
    {background: #ffa1be;
    color: #ffffff;
    font: normal 20px Capriola;
text-shadow:0 1px #ccc;
    width: 70px;
    height: 50px;
    display: inline-block;
    padding: 25px 5px 5px 5px;
    margin: 5px;
    margin-right: 2px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    text-align: center;
    -moz-box-shadow: inset 0 0 0px 8px #ea649a;
    -webkit-box-shadow: inset 0 0 0px 8px #ea649a;
    box-shadow: inset 0 0 0px 8px #ea649a;
    -moz-transition: all 0.4s ease-out; 
    -webkit-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;}
#menu:hover
    {opacity: .80;
    -moz-box-shadow: inset 0 0 0px 38px #7dd3ef;
    -webkit-box-shadow: inset 0 0 0px 38px #7dd3ef;
    box-shadow: inset 0 0 0px 38px #7dd3ef;
     -webkit-transform: rotate(360deg) scale(1.1) skew(1deg) translate(0px);}

2- Depois que personalizar o código a seu gosto, cole o código abaixo em um novo gadget de HTML/JavaScript:

<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOMECOMMOUSE'"onmouseout="this.innerHTML='SEMMOUSE'">SEMMOUSE</div></a> <br />  

 Em seulink.com, cole a url do que quiser. 

 Nome com mouse: Cole o que vai aparecer quando passarem o mouse na bolinha. 

Sem mouse: é o que aparece normalmente. 

Total créditos ao Kawaii World, porque foi de lá que tirei o tuto =3