Tutorial: Menu Onders

Trouxe para vocês um modelo de menu que eu acho puro amor - e que encontrei o código no Things to help you ♥ (tumblrs de HTML/CSS sempre nos ajudam com coisitas nos nossos blogs!) -, o Menu Onders, o diferencial dele é o efeito giratório. Confira o tutorial clicando em Leia mais..

Vá até o Painel de Controle e encontre 'Modelo' > Editar HTML e procure por ]]></b:skin> e logo acima dele acrescente:

/******** menu onders by waytolisten **/

.menuonders {

width:60px; /** largura **/

height:60px; /** altura **/

border-radius:60px 60px 60px 60px;

background:#000; /**cor do fundo **/

color:#fff;

text-shadow: 0px 1px 1px #707070;

text-align:center;

font-size:11px; /** tamanho da fonte **/

float:left;

margin:5px;

padding:3px;

-webkit-transition-duration:.99s;}

.menuonders:hover{

background:#f5f5f5; /** cor do fundo ao passar o mouse **/

color:#000;

border:2px dotted #ccc; /** borda do circulo ao passar o mouse **/

-webkit-transform:rotate(360deg);

-webkit-transition-duration:.99s;  }

.menuonders a:hover {

color:#000;  /** cor do link ao passar o mouse **/}

Feito isso é só acrescentar o código seguinte a um gadget HTML.

<div class="menuonders"><br><a href="#">Início</a></div>

<div class="menuonders"><br><a href="#">Página 1</a></div>

<div class="menuonders"><br><a href="#">Página 2</a></div>

<div class="menuonders"><br><a href="#">Página 3</a></div>

<div class="menuonders"><br><a href="#">Página 4</a></div>

<div class="menuonders"><br><a href="#">Página 5</a></div>

Prontinho! Agora é só usar. Os créditos dos códigos já foi citado logo no início do post. Um grande beijo, até logo.