25/11/2014

Menu Marshmallow

 Oi meus Marshmallows, como estão? Espero que bem! Hoje trouxe um tutorial de um menu. Veja o print abaixo:




Quem aí gostou? Vamos ver como faz?
Vá no editor de HTML do seu blog e pesquise por ]]></b:skin>
Acima do código, cole:


@FONT-FACE {
FONT-FAMILY: 'PIXELADE';
SRC: URL('HTTP://STATIC.TUMBLR.COM/IG73LMP/FNDMCIXX3/PIXELADE.TTF');
}

Esse é o código da fonte do menu. Ela está instalada no seu modelo, então você pode usar a fonte em outras coisas.
Após isso, antes de ]]></b:skin> cole:
/* MENU MARSHMALLOW POR PEQUENA GAROTA*/
MARSH{
COLOR: #949494; /*COR DA FONTE*/
TEXT-ALIGN:CENTER;
FONT-FAMILY: PIXELADE; /*NÃO ALTERE*/
FONT-SIZE: 13PX;
BACKGROUND: #FEF2F1; /*FUNDO DO MENU*/
PADDING: 2PX;
FLOAT: LEFT;
MARGIN: 2PX;
WIDTH: 22%; /* TAMANHO DO MENU */
-WEBKIT-TRANSITION-DURATION: .80S;
BOX-SHADOW: INSET 0 0 18PX #FFE4E1, 0 0 3PX #FFD1CC; /* SOMBRA INTERNA */
BORDER-RADIUS: 3PX; /*BORDAS ARREDONDADAS*/
}
MARSH:HOVER{
BACKGROUND: #F0F8FF; /*FUNDO DO MENU AO PASSAR O MOUSE*/
COLOR: #949494; /*COR DA FONTE AO PASSAR O MOUSE*/
-WEBKIT-TRANSITION-DURATION: .80S;
BOX-SHADOW: INSET 0 0 18PX #D7ECFE, 0 0 3PX #AFEEEE; /* SOMBRA INTERNA */
BORDER-RADIUS: 3PX; /*BORDAS ARREDONDADAS*/
}
Esse é o código do menu. É fácil personaliza-lo! Altere somente o que está em roxo

Atenção: 
BOX-SHADOW: INSET 0 0 18PX #D7ECFE, 0 0 3PX #AFEEEE; /* SOMBRA INTERNA */
Personalize essa parte respeitando a cor de fundo para dar esse efeito 'fofinho' no menu, daí fica igual ao meu. 
 Para colocar no seu blog, adicione um gadget de html/js e cole:
<DIV><A HREF=" LINK "><MARSH> NOME</MARSH></A>
<A HREF=" LINK "><MARSH> NOME </MARSH></A>
<A HREF=" LINK "><MARSH> NOME </MARSH></A>
<A HREF=" LINK "><MARSH> NOME </MARSH></A>
Prontinho! Créditos: Pequena Garota  

4 comentários:

  1. Amei a dica e estou usando ela, mas o meu ficou diferente :3
    http://universokawaiicute.blogspot.com.br/

    ResponderExcluir
  2. Mas, só da para colocar só 1 link ?

    ResponderExcluir
  3. Amei a dica, muito bom e prático de fazer *-*
    http://meubaudeestrelas.blogspot.com.br

    ResponderExcluir
  4. Olá Giovanna! Bom, esse modelinho da para vários links, mas se vc quiser colocar só um não tem problema.

    ResponderExcluir