Tutorial - Menu Giratório

Boa Tarde/Noite Pessoal.

Hoje vi no Kawaii World o Tutorial de um Menu super Fofo, como eu já Disse no Título do Post o Nome dele é Menu Giratório.

Para Visualizar ele Clique Aqui.

Enjoy ~~

1. Em editar HTML, 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 de personalizar como desejar, cole o seguinte código em um 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.