08/07/2015

Tutorial - Menu Inverse ♥



Hello, candies!

Admito que hoje eu não estava com muita criatividade para um post bem legal hoje :/ Mas esses dias, eu consegui colocar um menu personalizado simples, mas que tem um efeito legal: toda vez que passar o mouse nas páginas do menu, ele gira! Para ver, é só passar o mouse pelo menu do primeiro gadget do blog! Gostaram? :3 Então eu vou mostrar o tutorial dele para vocês :) Vamos ver?



Vá em Modelo - Editar HTML. Dê Ctrl+F (ou F3) e pesquise por:  ]]></b:skin>
Acima dessa tag, cole o seguinte código:

/*MENU INVERSE - PEQUENA GAROTA*/
INVERSE{
COLOR: #CORDAFONTE;
TEXT-ALIGN:CENTER;
FONT-SIZE: 11PX;
BACKGROUND: #CORDEFUNDO;
PADDING: 2PX;
FLOAT: LEFT;
MARGIN: 2PX;
WIDTH: 21%;
-WEBKIT-TRANSITION-DURATION: .80S;
BORDER-RADIUS: 50PX;
-MOZ-TRANSITION: 0.7S EASE-OUT;
TRANSITION: 0.7S EASE-OUT;
}
INVERSE:HOVER{
BACKGROUND: #CORDEFUNDOHOVER;
COLOR: #CORDAFONTEHOVER;
-WEBKIT-TRANSITION-DURATION: .80S;
-WEBKIT-TRANSFORM: ROTATE(-180DEG);
-MOZ-TRANSFORM: ROTATE(-180DEG);

}

Aonde estiver destacado, você deverá colocar o código da cor desejada! Caso não saibam o código das cores, tem um site com uma tabela com todos os códigos de cada cor para por no HTML:  Tabela de Cores para HTML

Depois disso, vá em Layout, e abra um novo gadget de HTML/JS, e cole o seguinte código:

<A HREF="URL 1"><INVERSE>NOME</INVERSE></A>

Repita quantas vezes for necessário.

Créditos: Pequena Garota (deem créditos á este blog se for usar o menu)

Foi isso, espero ter conseguido explicar tudo certinho á vocês :3


9 comentários:

  1. Eu adoro este tipo de menu! Vou usar no meu próximo lay :3.
    Beijos!

    ResponderExcluir
    Respostas
    1. Eu também adoro ♥ Sério? Que bom, fico feliz, haha :D
      Kiss ♥

      Excluir
  2. Ótimo tutorial,esse menu é uma graça ^^
    Beiijos

    ResponderExcluir
  3. Hey, sou novata aqui, e obrigada por ter seguido meu blog :3, enfim, amei o tuto :3 provavelmente vou usar ele em breve :3
    Beijinhos Bye
    Sweet Purple Bunny

    ResponderExcluir
    Respostas
    1. De nada, seu blog é muito lindo legal, hehe XD Espero que use :)
      Kiss ♥

      Excluir
  4. Oiieeeeehhhhhwwwww :3 Um menu é mesmo uma gracinha, que só <33
    Seu bloguito, é tão fofinho :3 Adoreiiiii muita coisa por aqui <3
    Ei, pudim :3 quer se tornar uma afiliada nossa ?
    Esperando respostinha! Bye bye, pudim!

    Thereza | { f l u f f y w h i t e}

    ResponderExcluir
    Respostas
    1. Oiiiii <o/ Fico feliz que tenha achado ele fofo, hehe ♥ Que bom! Quero sim :D Vou avisar no seu blog, e depois que me colocar eu coloco você como afiliada no meu blog! Obrigadaaa ♥
      Kiss ♥

      Excluir