Menu Rounded Shadow

>3

Olá minhas gelatinas com chantilly, como estão? ^^
Hoje trouxe um menu lindo para vocês.
O resultado será esse:
 




Vamos ao tutorial?
No Blogger, vá em Design> Editar HTML. Tecle Ctrl F e procure por:

]]></b:skin>

 Logo acima dessa tag, cole o código abaixo:

.roundedshd {

background: #f5f5f5; /* Cor do background */

width: 50px; /* Largura dos círculos */

height: 50px; /* Altura dos círculos */

padding: 11px;

margin-top: 6px;

line-height: 50px;

display: block;

text-align: center; /* Alinhamento dos links */

border-radius: 100px; /* Bordas arredondadas */

-webkit-transition-duration: .50s; /* Efeito Fade */

font-family: verdana; /* Fonte */

color: #000; /* Cor dos links */

font-size: 15px; /* Tamanho da fonte */

}

. roundedshd:hover{

-moz-box-shadow: inset 0 0 10px 10px #696969; /* Sombra */

-webkit-box-shadow: inset 0 0 10px 10px #696969; /* Sombra */

box-shadow: inset 0 0 10px 10px #696969; /* Sombra */

color:#000; /* Cor dos links - hover. */

}

ff {#000;} /* Cor dos links */

 Salve. Vá para Elementos da página, adicione um novo gadget de HTML/Javascript e nele coloque o seguinte código:

<a href="URL"><div class="roundedshd"><ff>Nome do link</ff></div></a>

<a href="URL"><div class="roundedshd"><ff>Nome do link</ff></div></a>

<a href="URL"><div class="roundedshd"><ff>Nome do link</ff></div></a>

<a href="URL"><div class="roundedshd"><ff>Nome do link</ff></div></a>

<a href="URL"><div class="roundedshd"><ff>Nome do link</ff></div></a>

 E pronto!Gostaram do tutorial?Comentem!