É o menu que eu uso neste tema e o tutorial que estou postando eu devo os créditos ao Pequena Garota pela autorização.
Cole o código abaixo no CSS do design do seu blog (o lugar onde você coloca os códigos de personalização) (o código pode ser colado acima de ]]></b:skin> caso você use Blogger ou antes de </style> caso você use outras plataformas.
@font-face {
font-family: 'Pixelade';
src: url('http://static.tumblr.com/ig73lmp/FNdmcixx3/pixelade.ttf');
}
/* 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*/
}
E finalmente, cole o código abaixo aonde você quiser que apareça o menu:
<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>
Lembrando que, para usar o código da sombra interna (box-shadow: inset 0 0 18px #D7ECFE, 0 0 3px #afeeee; /* sombra interna */) o d7ecfe é a sombra de dentro, e o afeeee é a sombra de fora.
Dúvidas? Ask-me, né?