Tutorial: Menu Marshmallow

Oláá pessoal!! 

Tudo bom??

Hoje estou com uma preguiça enorme para postar, meus olhos estão se fechando enquanto escrevo essa postagem. Eu já volteia  estudar na Terça-Feira,  e estava fazendo o novo layout do portfólio. Que inclusive já está aberto pra vocês. Para ver, clique aqui.

Bom, pra não ficar muito tempo sem postar, trouxe hoje um tutorial de um menu, que se chama Menu Marshmellow. Eu achei ele no Pequena Garota, então créditos a Viih. O menu é esse:

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

Atenção: 

box-shadow: inset 0 0 18px #D7ECFE, 0 0 3px #afeeee; /* sombra interna */

 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>

Espero que tenham gostado. 

Beijos,

Pâm