14/11/2014

Menu Sweared

  Hello ladies, como estão? Tomara que bem, hoje quase dei um ataque do coração, porque minha internet caiu por uma HORA, e eu estava fabricando esse menu, imagina o surto que eu tive? Mas amei o resultado, e desculpe a demora do post, estava no treino de vôlei e o código estava pelas metades quando cheguei :/
  Mas enfim, é um menu lateral, espero que gostem ^.^, lembrando que se usar: CREDITE.


  Para usá-lo vá em Modelo >> Editar HTML e procure pela tag ]]></b:skin>, achou? Agora adicione o seguinte código:
sweared { margin-top: 8px; color:#fff; text-shadow: 1px 1px 1px #000000; background:#696969; border: solid 1px #ffffff; box-shadow: inset 0 0 6px #000000, 0px 1px 1px#000000; margin:+2px; margin-left:0px; display: inline-block; text-align: center; font-family: Century Gothic; font-size: 10px; float: center; padding:5px; height: 10px; width: 45px; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); filter: grayscale(0%); -webkit-transition-duration: .99s; -moz-transition-duration: .99s; -webkit-transition-duration: .70s; } sweared:hover { cursor:hand; background:#ffffff; border: solid 1px #696969; box-shadow: inset 0 0 6px #000000, 0px 1px 1px #000000; text-align: center; font-family: century gothic; font-size: 10px; color:#696969; text-shadow: 1px 1px 1px #000000; -webkit-filter: saturate(0%); -moz-filter: saturate(0%); -o-filter: saturate(0%); -ms-filter: saturate(0%); opacity: .43; -webkit-transition-duration: .40s -webkit-transform: rotate(360deg) scale(1.1) ; -webkit-transform: rotateX(350deg) rotateY(0deg) rotateZ(0deg); -moz-transform: rotateX(350deg) rotateY(0deg) rotateZ(0deg); -o-transform: rotateX(350deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(350deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(350deg) rotateY(0deg) rotateZ(0deg);}
  Só arrume as partes em negrito e salve, agora em um gadget HTML/JavaScript cole este outro code:
<div style="font-style: normal; left: -65px; margin-top: -55px; position: absolute; width: 20px;"><br /><br /><a href="LINK"><sweared>NOME</sweared></a><br /><a href="LINK"><sweared>NOME</sweared></a><br /><a href="LINK"><sweared>NOME</sweared></a><br /><a href="LINK"><sweared>NOME</sweared></a><br /></div>
   Se quiser que o menu fique do lado direito troque o left ali em cima por right, e arrume o -65px até se mover ao lugar certo. Já o margin-top, é o quanto ele se distancia do topo, porém ele tem um - antes do número, logo se você aumentar o número com o - antes, mais ele se aproxima do topo, já sem o -, quanto mais você aumenta o número mais ele se afasta do topo ok?

  Kissus e bye.


2 comentários:

  1. Olá, está tudo bem comigo também. Uma vez a minha internet ficou fora do ar por um dia inteiro. Eu morri, fiquei desesperada. E meu celular estava descarregado. Acredita?
    O menu ficou fofinho, adorei o tuto.

    sugar-purry.blogspot.com

    ResponderExcluir
    Respostas
    1. Oii, é eu pensei q ia morrer...
      Mas q bom q gostou do menu ^^

      Kissus

      Excluir