"Início", "Antigas" e "Recentes" com Hover

 

Yoo!

Percebi que não tinha postado esse tutorial por aqui, algo que não deveria ter ocorrido.

Ele é bem simples e eu até acho bem útil, tanto que uso por aqui. O tutorial vai ensinar vocês a colocar o "Início", "Antigas" e "Rencentes" com hover, ou seja, ao passar o mouse a imagem muda.

Caso queiram uma Live Preview, direcionem-se ao fim da página e passe o mouse lá.

Espero que compreendam, é super fácil de fazer.

1. Primeiro faça as suas imagens. No total são 6, duas para cada botão. 3 aparecem normalmente e outras 3 somente ao passar o mouse.

2. Procure por <data:newerPageTitle/>  (botão de postagens recentes) e no lugar, cole:

<img border='0' onmouseout='this.src="LINK DA IMAGEM 1"' onmouseover='this.src="LINK DA IMAGEM 2"; return true' src='LINK DA IMAGEM 1'/>

- Imagem 1 refere-se a que aparece sem o mouse estar por cima.

- Imagem 2 refere-se a que aparece com o mouse por cima dela.

3. Agora procure por <data:homeMsg/> (botão de Início) e cole a mesma coisa, só que desta vez as imagens serão de Home/Início.

4. Por último procure por <data:olderPageTitle/> e realize o mesmo procedimento, sendo equivalente as imagens de Anteriores/Antigas.