Menu com efeito Hover

Bom, muita gente tem me perguntado como eu fiz esse menu horizontal abaixo do cabeçalho. Para isso, você precisa pelo menos do photofiltre, e se quiser enfeitar mais, o photoscape também ajuda. Ah, e eu só sei fazer com 5 páginas, por isso separei as outras em outro menu. Da até um certa preguicinha de fazer, mas vale a pena e o resultado é lindo. Mas enfim... Vou fazer o tutorial, mas saibam que eu aprendi esse tutorial aqui: Débora Morais. Ao tutorial! >>>>


Okay, gente! Para começar, vá em Modelo >> Editar HTML>> Caixinha de Busca(Ctrl+F) >> Procure por ]]></b:skin>. Acima da tag que procurou, cole o seguinte código:

.navi1 {
display: block;
height: 64px;
margin:0 auto;
position: relative;
width: 525px;
}
.navi1 ul {
float: none;
list-style-image: none;
list-style-type: none;
margin: 3px 0;
}
.navi1 ul li {
height: 64px;
background-image: url(URL-DA-IMAGEM);
background-repeat: no-repeat;
float: left;
margin: 0px;
padding-top: 5px;
position: absolute;
}
.navi1 ul li a {
display: block;
height: 100%;
width: 100%;
}
.navi1 ul li.sm1 { background-position: 0px 0px; left: 0px; width: 125px; }
.navi1 ul li.sm2 { background-position: -125px 0px; left: 100px; width: 124px; }
.navi1 ul li.sm3 { background-position: -249px 0px; left: 200px; width: 124px; }
.navi1 ul li.sm4 { background-position: -373px 0px; left: 300px; width: 125px; }
.navi1 ul li.sm5 { background-position: -498px 0px; left: 400px; width: 126px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.sm1:hover { background-position: 0px -75px; }
.navi1 ul li.sm2:hover { background-position: -125px -75px; }
.navi1 ul li.sm3:hover { background-position: -249px -75px; }
.navi1 ul li.sm4:hover { background-position: -373px -75px; }
.navi1 ul li.sm5:hover { background-position: -498px -75px; }

Okaay, agora aonde está escrito URL-DA-IMAGEM  você vai trocar pela forma do seu menu. Fiz alguns que vocês podem editar: (Lembre-se, quando terminar de editar, deixe o fundo transparente. E quando eu falo editar, quer fizer APENAS adicionar o nome de cada página.)

 Ou, você pode pegar menus já prontos.

Visualize, e veja se o seu blog está normal. Se estiver, salve. Agora, copie o seguinte código:

<div class='navi1'>
  <ul>
    <li class='sm1'><a href='/'/></a></li>
    <li class='sm2'><a href='url da segunda página'/></a></li>
    <li class='sm3'><a href='url da terceira página'/></a></li>
    <li class='sm4'><a href='url da quarta página'/></a></li>
    <li class='sm5'><a href='url da quinta página'/></a></li>
  </ul>
</div>

Vá em Layout, Adicionar Gadget, HTML/JavaScript. Cole o código e modifique as partes destacadas em vermelho pela url de cada página, exceto a primeira que é a home e não precisa editar. Lembre-se de adicionar o http://. Caso contrário não dará certo. Depois é só salvar e mover o gadget (ainda no layout) para onde você quiser. Eaí, deu certo? Comente, beijos!