7 de jan de 2013

Tutorial - Menu Giratório


Tumblr_lq8rksztlj1qhwy7ko1_500_large

Boa noite, gente.

Só venho postar agora, pois estava na casa do meu colega jogando video-game! hahaha'

Bom, venho com um tutorial que achei bem fofo: O Menu Giratório!!!!Vi o tutorial no  - Birthday Cake, mas na verdade, esse tuto é do Kawaii World. 

PREVIEW:  $$$$$$

Lindo, né? Vamos aprender?



1 - Vá no seu HTML, tecle F3 e procure por ]]></b:skin> e acima do
código cole isso:

#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 arrumar as cores e os códigos ao seu gosto, adicione
um gadget de HTML/JavaScript e nele cole:

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

Explicação:     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.

Beeijos, lindaas! 
Obrigada pelos 49 seguidores!
Falta só mais um para a meta. Pode nos ajudar?? 
^-^

Nenhum comentário:

Postar um comentário

Heey!! Se quiserem deixar o seu comentário, leia PLEASE aqui embaixo:

*Não xingue ninguém aqui! Seja educada(o)!
* Dúvidas, elogios e críticas são sempre bem-vindas!
* Leia toda a postagem, pois sempre faço com muito esforço e carinho pra vocês!
*Vou até o perfil de vocês para visitar e talvez até seguir o seu blog!

Obrigada por comentar!

Volte Sempre!