Big Tutorial - Como Fazer Menu Hover!

EU QUERO :P

Hey Divos! QUE EMOCIONANTE É O PRIMEIRO POST DE HTML (Sem ser explicando sobre ele) DO BLOG *O* !Antes de dizer a proposta, a Belle Pasarelli do Cantinho da Belieber mandou uma ask sobre como colocar um fundo cinza e rosa, eu realmente não entendi, por que Belle eu quero saber se é o fundo do Blog especificamente, ai você me diz que eu mando o tutorial, ok? Então,sabem esse menuzinho ao lado da minha imagem do cabeçalho ? Eu vou ensinar a como fazer ele e como colocá-lo daquele jeito sem estar dentro do próprio cabeçalho!E como tem muita gente que não sabe mexer em html, o menu não faz parte disso! É só um gadget do Blog! (agora se quiser o colocar ao lado da Imagem, terá que mexer no HTML! Mas é muito fácil -eu te garanto-. Esquecendo esse papo furado... 

Vamos ao tutorial? 

Basta clicar na imagem ''Leia Mais"!

1º - Menu com efeito hover!

Meu menu com efeito hover foi meio diferente...Eu me usei como base o tutorial do Go Imagine ''Menu com Imagens em hover'' .Porém ela (Amy) ensina como fazer o Menu igual ao dela,o hover.Só que eu não usei esse tuto,pois  meu computador estava meio ferradinho (mais que já ta) ai não ajudou muito.E uma amiga minha já me perguntou como eu o coloquei ao lado do cabeçalho, sem o colocar na imagem!Essa é a parte mais fácil! Então chega de papo-furado!

PS:"Tia Lu, o que é hover?" Hover meu querido é um efeito de transição, que muda ao passar o mouse.

1º:Faça suas bases no Photoscape ou no Photo Filtre! Eu recomendo que faça 10 bases. 5 normais e 5 em hover. (Porém, como eu sei que muitos de vocês são preguiçosos eu fiz 2 tipos de base)
Base 1:

NORMAL

HOVER

Base 2:

NORMAL

HOVER

Ta, ai você pensa: "Mais cadê os nomes nas bases?" Olha, como eu não sei o que você vai querer colocar dentro das bases, eu não coloquei nome.Basta você ir no seu Photo Scape ou no Photo Filtre e use a letra "Impact" (se quiser igual o meu) .

PS:No fim do Post vou disponibilizar o menu igual ao meu com as bases editadas.

Pronto! Feito o seu menuzinho, o que você vai fazer? Vai hospedar(colocar) as imagens em um site, para receber o link.Recomendo o TinyPic.Depois de ter feito isso, vá em Layout ---> Adicionar um Gadget ---> HTML / Javascript e cole fazendo as devidas alterações:

<center><a href="link da sua página"><img src="URL da imagem normal" onmouseout="this.src='Repita a URL da imagem normal';" onmouseover="this.src='URL da imagem no estado hover';"/></a></center>

• Em "Link da sua página", você coloca o link da página que você quer no menu.
• Em "URL da imagem normal" você coloca o link da imagem que você quer antes de passar o mouse.
• Em "URL da imagem em hover" você coloca o link da imagem que você quer ao passar o mouse.
• Vá repetindo o link e colocando as imagens.

Prontinho! Feito isso, veja se seu gadget está na coluna lateral, caso não esteja, você o coloca nela.

Depois, vamos para a parte do HTML.Vá em "Modelo" ---> "Editar o HTML". Por que agora você vai precisa subir a coluna lateral (sidebar), só que sem o fundo, ou seja só as letras e os gadgets!

Aperte F3 no seu teclado e irá aparecer uma caixinha de pesquisa, nela você vai escrever:

.main-inner .column-left-outer { - Se a coluna for esquerda

.main-inner .column-right-outer { - Se a coluna for direita

Pronto feito isso você vai encontrar um código mais ou menos assim:
Coluna Esquerda:
 .main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
      }
Coluna Direita:
    .main-inner .column-right-outer {
        width: $(main.column.right.width);
        margin-right: -$(main.column.right.width);

Então você vai adicionar o seguinte código abaixo da "{":
margin-top: -150px;

Se a barra não subir até aonde você quer, você vai aumentando os números.Exemplo, o meu para ficar desse jeito foi : "margin-top: -600px;". Mas isso depende de cada Blog.
Se você não soube editar as bases, aqui está o menu igual ao meu, basta copiar e colar em um novo Gadget como eu disse lá em cima do Post.
Código do Menu:

<center><a href="Link do Início do seu Blog."><img src="http://i41.tinypic.com/30uskdv.png" onmouseout="this.src='http://i41.tinypic.com/30uskdv.png';" onmouseover="this.src='http://i41.tinypic.com/300sjtk.png';" /></a>

<center><a href="Link do Contato do seu Blog."><img src="http://i41.tinypic.com/28akkrb.png" onmouseout="this.src='http://i41.tinypic.com/28akkrb.png';" onmouseover="this.src='http://i40.tinypic.com/1fy8lt.png';" /></a>

<center><a href="Link do FAQ do seu Blog."><img src="http://i41.tinypic.com/34nk000.png" onmouseout="this.src='http://i41.tinypic.com/34nk000.png';" onmouseover="this.src='http://i42.tinypic.com/w0kncj.png';" /></a>

<center><a href="Link do Sobre do seu Blog."><img src="http://i39.tinypic.com/257lwup.png" onmouseout="this.src='http://i39.tinypic.com/257lwup.png';" onmouseover="this.src='http://i41.tinypic.com/34nh7w6.png';" /></a>

<center><a href="Link do Goodies do seu Blog."><img src="http://i41.tinypic.com/2zxy3cz.png" onmouseout="this.src='http://i41.tinypic.com/2zxy3cz.png';" onmouseover="this.src='http://i43.tinypic.com/2m2yjom.png';" /></a></center></center></center></center></center>

<span style="font-size: x-small;">Bases e Imagens por <a href="http://www.thegirlschoices.blogspot.com/">The Girls Choice.</a>Tutorial: <a href="http://www.goimagines.blogspot.com/">Go Imagine</a> e <a href="http://www.thegirlschoices.blogspot.com/">The Girls Choice.</a></span><br />

Espero que tenha servido para vocês! Beijos,

Lúu