Menu com efeito hover igual o do blog

Créditos da imagem: http://weheartit.com/entry/18905804


Em apenas 3 dias com esse layout já recebi muitas perguntas de como fiz esse menu, que uso no blog, então resolví fazer um tutorial ensinando-o, primeiramente só aconselho fazer esse tutorial quem tem pasciência para criar e hospedar imagens, além disso pessoas que não se embaralhem com elas, dica : coloque o nome nelas como: home 1 e home 2 que fica mais fácil depois pra entender.Também queria falar que eu aprendi esse código no tuoriais attitude included, mais vou fazer o tutorial com as minhas palavras, esse é o menu que vamos aprender :


1) Vá em design no seu painel do blogger e depois em adicionar gadget
2) escolha o gadget HTML/Javascript e cole o seguinte código:

<img onmouseout="this.src='Imagem normal sem passar o mouse1';" onmouseover="this.src='imagem normal sem passar o mouse1';" src="imagem quando o mouse passa1" /></a>
<img onmouseout="this.src='Imagem normal sem passar o mouse2';" onmouseover="this.src='imagem normal sem passar o mouse2';" src="imagem quando o mouse passa2" /></a>
<img onmouseout="this.src='Imagem normal sem passar o mouse3';" onmouseover="this.src='imagem normal sem passar o mouse3';" src="imagem quando o mouse passa3" /></a>

Se quiser mais de 3 categorias copie e cole o código mais de uma vez. Ali você substitui pela url da imagem que quer quando o mouse não estiver na imagem , e pela url de quando o mouse passa pelo menu

3)Para por os links clique em 'formato rich text', você verá as imagem, selecione uma por uma e clique em 'criar links' depois de colocar o link nas imagens, volte ao editar html do gadget, salve e pronto.
É isso nenéns, ah, eu já fiz minha árvore de natal com a minha mãe, logo vou mostrar a minha e dar dicas para vocês, além disso também quero botar minha lista de natal aqui no blog e tal beijinhos luh