Menu com efeito hover

Oi gente!

Antes de tudo quero agradecer por tantos elogios sobre o novo layout, vocês não sabem o quanto eu fiquei feliz com tantos recadinhos fofos, e embora ainda não tenha conseguido responder todos, saibam que fico muito grata pelo carinho de vocês. E assim que der continuo respondendo, afinal, ainda tem uns 4 post cujo comentários ainda não foram respondidos, mil perdões!

Perceberam que o aniversário do blog ta chegando? Faltam apenas 13 dias *o* Nem me liguei que já estava chegando e não preparei nada, ainda. Mas vou preparar umas coisas bem legais, como um concurso ou sorteio (o que vocês preferem? Em ambos o prêmio com certeza será um layout, porque prêmio real eu não posso dar agora haha) e uma retrospectiva, que não pode faltar né? (pra mostrar meus antigos layouts nada bonitos rsrs)

Mas sem delongas, vamos pro tutorial? Até porque eu já falei de mais

Como algumas pessoas pediram, e muitas gostaram, resolvi ensinar como fiz o menu que estou usando atualmente, esse aqui:

Antes de começar, quero creditar o lindo blog da Déb, o Spázio DM, pois foi lá que aprendi a fazer esse menu lindo <3

Quer aprender? Clica em leia mais!

Vou logo dizendo que é um pouco complicado, por isso requer bastante atenção. Mas não desista hein? Antes de ir fazendo, leia o tutorial inteiro antes, pra não pular partes por pressa ok? 

1- Entre em Design > Editar HTML e usando Ctrl+F procure por ]]></b:skin>

2- Logo acima desse trecho que procurou cole o seguinte código:

.navi1 {
display: block;
height: 64px;
margin:0 auto;
position: relative;
width: 623px;
}
.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 aqui);
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; }

Importante:

Em background-image:  Você vai colocar o link da imagem do seu menu, vou deixar uma imagem base pra vocês terem uma ideia de como fazer ou se quiserem editar a mesma fiquem a vontade. Recomendo que editem e usem essa que vou disponibilizar, pois ela está com a largura dos "quadradinhos coloridos" certa, e se fizer com outros tamanhos fica difícil explicar, pois vai ter que alterar aquela parte enorme do background position e vai complicar muito. Então salve a imagem que vou disponibilizar e editem cores, acrescentem o nome das páginas e etc. Enfim, use a criatividade!

OBS: Base feita por mim.

OBS:

- A parte de cima é o menu em estado normal e a parte de baixo é o menu quando o mouse passa por cima.

- Em height: 64px é a altura da imagem e width: 623px é a largura, troque esses valores de acordo com o tamanho da sua nova imagem. Mas, na altura, se a imagem tem 155px você vai colocar por exemplo, 64px  de altura. Pois senão vai aparecer as duas partes do menu (a parte do estado normal e estado hover). Não tem um valor certo,  mas se usar a imagem que disponibilizei 64px de altura vai dar certinho. 

- Nesse menu é possível colocar apenas 5 links (um em cada espacinho).

Depois disso visualize e se estiver tudo certo, clique em salvar (o menu ainda não vai aparecer quando você visualizar, só visualize para ver se não interferiu em nada)

3- Para ligar essas imagens á um link você vai em "Design" > "Elemento de página" e adiciona um gadget HTML/JavaScript. Nele cole esse código:

<div class='navi1'>
  <ul>
    <li class='sm1'><a href='ENDEREÇO 1'/></li>
    <li class='sm2'><a href='ENDEREÇO 2'/></li>
    <li class='sm3'><a href='ENDEEÇO 3'/></li>
    <li class='sm4'><a href='ENDEREÇO 4'/></li>
    <li class='sm5'><a href='ENDEREÇO 5'/></li>
  </ul>
</div>

No endereço 1 coloque o link da página da primeira palavra que você colocou na imagem e assim consequentemente. Exemplo: 

Como "Início" é a primeira palavra do menu, no código onde pede ENDEREÇO 1 você vai colocar o link da página inicio, pois como já disse, é a primeira palavra do menu, então, endereço 1. 

E continue com os outros links: Endereço 2 = Link da segunda palavra do menu,  Endereço 3 = Link da terceira palavra do menu e assim consequentemente.

Feito isso é só arrastar o gadget para o lugar que quiser. Recomendo acima das postagens, que é mais largo e vai caber melhor. 

-Depois de adicionado o gadget você vai conseguir visualizar como ficou e se quiser editar a altura por exemplo, para se encaixar melhor. Ai é só ir alterando o valor da altura, aumentando, diminuindo e vendo como fica melhor (melhor é quando não aparece nenhum pouco do menu hover, aquele de baixo na imagem lembra?)

O tutorial é bem complicado, mas quem já entende um pouquinho de HTML vai achar mais fácil. Recomendo o PhotoFiltre para editar a base, mas também da pra fazer pelo PhotoScape. É isso, espero que tenham gostado, e entendido apesar de complicado rs