18 de outubro de 2012

Tutorial - Menu Giratório

Heeeeeey, sexy lady 8D
Como vão pessoal ?
Como eu to postando muitos utilitários talvez fosse legal postar uns tutos de vez em quando não ?
Então hoje eu trouxe um tuto de um menu bem bonitinho,
Que quando você passa o mouse ele tem um efeito giratório onde aparece a palavra que se quer o3o

Tipo isso aqui :

     
Só pra constar as imagens foram tiradas do Kawaii Wolrd.

Então vamos ao tuto o3o
Hey Ho Let's Vamos /o/
1-  Clique em Editar HTML e 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 que personalizar o código a seu gosto, cole o código abaixo em um novo gadget de HTML/JavaScript:

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

 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. 

Total créditos ao Kawaii World, porque foi de lá que tirei o tuto =3

4 comentários:

  1. Bacana :)
    Mas sou péssima em html :s
    kkkk

    Moçaa, lindo o seu blog.
    Gostei demais.
    Foi voc~e que fez o lay? Ele é tão diferente, gostei de tudo, e a cor é mara. Bom gosto :)

    beijos

    Conheça, siga ou opine?
    http://aquelahistoriana.blogspot.com.br

    ResponderExcluir
    Respostas
    1. kkkk, eu também era péssima com html no começo !
      É questão de tempo e paciência para criar layouts, além de gastar todos os neurônios com idéias para o tema do lay, kk.

      E sim, foi eu mesma que fiz o lay, que bom que gostou =3

      Excluir
  2. Mais esse menu não é do KW?

    ResponderExcluir
    Respostas
    1. Na verdade se você lesse no Kawaii World veria que a Kaorii tirou esse html de um tumblr e adaptou ao Blogger.
      Apesar de eu já ter visto este tutorial em diversos blogs por aí !
      Sem falar que eu dei os devidos créditos.
      Então sem querer ser indelicada, da próxima vez que fizer uma observação me acusando de qualquer que seja a causa, espero que pense duas vezes antes de me acusar, e tenha um pingo de vergonha na cara de não ficar em anônimo =3

      Beijos ~♥

      Excluir

Comentários como :
- Seguindo, segue de volta ?
- Assuntos nada a ver com o post
- Palavras vulgares ou obscenas
- Xingamentos, palavrões
- Críticas que não sejam construtivas
Comentários desse tipo não serão atendidos