6 de fev de 2013

Menu Onders

Tumblr_mhslbh0ugw1qdxkdzo1_500_large
Imagem encontrada em
http://weheartit.com/entry/51526009/via/cileklifalim
   Oi! Primeiramente quero dizer à vocês que eu não voltei ao blog. O blog está em hiatus, mas isso não me impede de postar algo pra vocês quando eu estiver com vontade ou simplesmente quando me bater uma onda criativa, não é mesmo? Então não se surpreendam quando eu postar simplesmente do nada. 
   Enfim, hoje 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 um exemplo abaixo:



Vá até o Painel de Controle e encontre 'Modelo' > Editar HTML (a nova interface confundiu tudo!), 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.

6 comentários:

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.