Tutorial: Menu Hover

Olá Bom dia eu trosse um tutorial muito legal pra vocês tomara que gostem.

Os Creditos estão no final do post.

1. Abra o HTML do seu blog e procure pela tag:

]]></b:skin>

2. Em cima da tag cole o seguinte codigo:

@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;}

Edite Somente as Cores, se não, pode dar errado o menu.

3. depois de ter Salvo, vá em adicionar um gadget,HTML/JavaScript, e nele cole esse 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>

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. se quizerem alguma coisa peça na ask.

Creditos: Diamond Resources