Dica: Colocando postagens em destaque abaixo do cabeçalho

Logo que troquei o layout do blog, recebi alguns comentários e um email me pedindo o tutorial deste menu de postagens em destaque que fica abaixo do cabeçalho do blog. Sinto informar, mas também estava desesperada atrás desse tutorial e descobri que ele não existia - ou pelo menos eu não tive a capacidade de encontrar. :P

No Wordpress tudo é mais fácil, então achei uns 5 ou 6 links ensinando a implementar esse menu, mas como eu sou teimosa e não abandonei o Blogger, tive que me virar.  Foi aí que achei esse tutorial do Go Imagine, e a partir dele criei meu próprio menu personalizado. Esse mesmo que vou ensinar para vocês como fazer agora. Vamos lá?

EDITANDO AS FOTOS

Selecione a imagem que você quer usar e abra-a no Photoshop (peguei uma qualquer no We Heart It para ilustrar o post).

1º: Selecione a ferramenta Cortar (Crop).

2º: Configure as medidas de Largura e Altura da ferramenta para 1cm x 1cm.

1º: Depois de recortar a foto salve-a. Em seguida, crie uma nova Camada (Layer) pressionando Ctrl + Shift + N.

2º: Selecione a ferramenta Balde de Tinta (Paint Bucket) e pinte a nova camada de branco.

1º: Mude a opacidade da nova camada para 70%.

2º: Adicione um texto com a chamada para o post e salve novamente.

ADICIONANDO O GADGET

Depois de ter as imagens prontas e hospedadas no Picasa, é hora de configurar o gadget das postagens em destaque. Acesse a área de Layout do blog e crie um novo gadget.

Crie um gadget HTML e cole o código abaixo, personalizando a seu modo.

<a href="link do post"><img src="URL da imagem normal" onmouseout="this.src='Repita a URL da imagem normal';" onmouseover="this.src='URL da imagem no estado hover';" width="largura das imagens" /></a>

Depois de seguir todos esses passos, a imagem deverá ficar assim (passe o mouse):

Para cada nova imagem que você colocar nesse menu, você deverá repetir o código novamente. Mexa nos valores de width para definir o tamanho das imagens. Se quiser que elas fiquem arredondadas, acrescente o código border-radius="20" antes de />.

Peço desculpas por qualquer erro, já que esse foi o meu primeiro tutorial de HTML, mas espero que tenham gostado! Qualquer dúvida é só deixar um comentário.