Tutorial: Menu Hover

Oi amigos vai tempo que eu não posto então resolvi postar hoje

Creditos: Diamond Resources

1. Vá ate EDITAR HTML e procure por:

]]>

2. Depois de ter achado a tag cole o codigo seguinte em cima da tag:

@font-face {font-family: Bebas Neue; src: url('http://static.tumblr.com/lahw1mf/flemh93fi/bebasneue.otf')}.menu20 { width: auto; color: #d8fdff; display: inline; text-shadow: 2px 1px 1px #8e82e6; font: 30px "Bebas Neue"; letter-spacing: 0px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; padding: 0px; margin: 5px;}.menu20:hover {color: #BA7C74; text-shadow: 2px 1px 1px #9f6861; }@font-face { font-family: "pixel"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }.blurgray {-webkit-filter: grayscale(0) blur(0px);-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease; }.blurgray:hover { -webkit-filter: grayscale(1.0) blur(1px);-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;}

3. Depois é só salvar, Agora vá ate layout > adicionar um gadget e cole este codigo:

<div class="menu20"><a href="Link">Home</a></div>
<div class="menu20"><a href="Link">Goodies</a></div>
<div class="menu20"><a href="Link">Sobre</a></div>
<div class="menu20"><a href="Link">F.A.Q</a></div>

Obs.: Se você quiser que ele fica em algum lugar diferente, tipo mais pra cima ou mais pra baixo, você tem que adicionar o código abaixo no gadget encima do HTML do menu no Gadget.

<div style="left: 385px; margin-top: 675px; position: absolute;">

Você só altera o Left e o Margin Top, o Left e para esquerda, para o menu ir para direita é so você botar um - na frente. E o Margin Top, é para cima, para o menu ir para baixo bote um - na frente.
Espero ter ajudado pessoal.