Tutorial - Menu Sunshine

Boa tarde leitoras. 

Voltei do dentista e fiz para vocês um menu bem cute. Apesar de achar que poucas pessoas usam esse tipo de menu, eu achei que ele ficou muito lindo!

Ele é bem simples, mas os códigos foram feitos por mim, então creditem.

Live Preview

1. Abra o HTML de seu blog, e pesquise por  ]]><b:skin.

2. Cole isto acima do código que você acabou de procurar:

.menu {
background: #fffdfe;
width:50px;
height: 10px;
border-right: 4px solid #ffb3ce;
border-left: 4px solid #ffb3ce;
color: #ffb3ce;
font-family: verdana;
text-transform: uppercase;
text-shadow: 0 1px 1px #ccc;
text-align: center;
padding: 5px;
font-size: 11px;
-webkit-transition-duration: 0.9s;
border-radius: 3px;
}

.menu:hover {
background: #fafefe;
 border-left: 4px solid #e1fdff;
border-right: 4px solid #e1fdff;
text-shadow: 1px 1px 1px #e1fdff;
color: #e1fdff;
}
 

3. Personalize como quiser! Apenas mude ás cores e a fonte, se mudar algo que não deve pode não ficar o mesmo efeito!

4. Cole isto aonde você quiser usar o menu:

<a href="link"><div class="menu" onmouseover="this.innerHTML='Textoemhover'">Nome</div></a>
<a href="link"><div class="menu" onmouseover="this.innerHTML='Textoemhover'">Nome</div></a>
<a href="link"><div class="menu" onmouseover="this.innerHTML='Textoemhover'">Nome</div></a>

Bem facinho não é mesmo? E o efeito é uma graça *u* Enfim, espero que tenham gostado e credite de usar/reblogar.
Beijos e até mais!