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