24/01/2013

Tutorial - Menu Giratório



Boa tarde sorvetes de baunilha *u*

Trouxe um tutorial do menu giratório, lá do Kawaii World, então se forem reblogar, não se esqueçam dos créditos! Eu acho esse menu super fofinho :3 
Geeeeeeeeeeeeente, 140 seguidores :'D 
Vocês não tem ideia como to feliz! Obrigada por fazer o blog crescer, e ah, quando chegar aos 145 vou fazer um outro game valendo divulgação, e dessa vez vão ser 3 blogs ))o))

Preview aqui.




1. Vá 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 quiser, 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 />


seulink.com, cole a url do que quiser.
Nome com mouse: Cole o que vai aparecer quando passarem o mouse no menu.
Sem mouse: é o que aparece normalmente.


Kissus ;*

E não deixem de comentar :))



11 comentários:

  1. Já conhecia o tuto acho ele ótimo se tiver um design bem elaborado (:

    #Bezoos~~> Kashmeres.blogspot.com

    ResponderExcluir
  2. Gostei muito!
    cr4zy-world.blogspot.com.br

    ResponderExcluir
  3. gostei do tutorial é otimo!

    design-of-html.blogspot.com.br <~ visita ?

    ResponderExcluir
  4. Já usei no CE.
    Amore, aceita afiliação?
    caramelos-encantados.blogspot.com
    Beijoos :*

    ResponderExcluir
  5. adooorei o menu, lindoo demaiss o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  6. Ótimo tutoo miga :)
    Tem uma tag no meu bloguito para o seu :)
    http://yogo-berry-official.blogspot.com.br/2013/01/tag-11-coisas.html#more
    Beijinhos :*
    - Naty

    ResponderExcluir
  7. Muito fofinho (; Amei
    Kisses
    Sweet Cherry -> Perfil

    ResponderExcluir