Piink Cookie: Menu com efeito hover

Bom dia meus pirulitos arco-íris

Hoje eu venho com a minha primeira dica de html ( goodie ) que é sobre como fazer um menu com efeito hover, que é esse efeito do nosso, com a imagem que muda ao passar o mouse. Eu vi esse código lá no Go Imagine (créditos deles ), e retirei de lá, mudei algumas coisinhas ( quase nada ) e fiz imagens pra vocês.
O efeito é esse ( passe o mouse para ver o efeito ) :

Vamos lá ?

Primeiro você tem que fazer as suas imagens ( ou pegar as que eu vou colocar no final do post ). Pra pegar o link da imagem, você tem que : ou colocar ela em um site de hospedagem de imagens ou deixar ela linkada em algum blog pra testes, clicar nela, pegar o link e aí colocar ( é assim que eu faço, haha ). Pra facilitar pra vocês, eu vou deixar essas aqui linkadas.

Depois de ter as imagens, e os seus links, vá em Design > Elementos de pág. > Adicionar um gadget > HTML/Javascript. Assim que abrir, coloque o seguinte código :

Agora vamos editar o código (o da caixinha). Troque a frase 'link do seu blog' pelo link que a imagem deve levar, se for para a pág. inicial, não coloque nenhuma url, mas uma barrinha : /. Troque url da imagem normal pela url da imagem normal, repita a url da imagem normal e e troque url da imagem em estado hover pela url da imagem que deve aparecer quando você passar o mouse.

Essas são as imagens que eu fiz :

Normal