Menu Marshmallow

Oi meus Marshmallows, como estão? Espero que bem! Hoje trouxe um tutorial de um menu muito fofinho, chamado Marshmallow. Que vi no Pequena Garota, por isso créditos para ele!

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'); }

• 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 negrito.
• 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>