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);
}
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
Foi isso, espero ter conseguido explicar tudo certinho á vocês :3
Eu adoro este tipo de menu! Vou usar no meu próximo lay :3.
ResponderExcluirBeijos!
Eu também adoro ♥ Sério? Que bom, fico feliz, haha :D
ExcluirKiss ♥
Ótimo tutorial,esse menu é uma graça ^^
ResponderExcluirBeiijos
Você tem toda razão! ^^
ExcluirKiss ♥
Hey, sou novata aqui, e obrigada por ter seguido meu blog :3, enfim, amei o tuto :3 provavelmente vou usar ele em breve :3
ResponderExcluirBeijinhos Bye
Sweet Purple Bunny
De nada, seu blog é muito lindo legal, hehe XD Espero que use :)
ExcluirKiss ♥
Este comentário foi removido pelo autor.
ResponderExcluirOiieeeeehhhhhwwwww :3 Um menu é mesmo uma gracinha, que só <33
ResponderExcluirSeu 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}
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 ♥
ExcluirKiss ♥