Tutorial - Efeito Para Postadores

Boa noite, moças e moços.

Hoje eu passei o dia olhando alguns blogs e lendo posts interessantes, quase não tive tempo de postar, mas espero que entendam. Ah, quero agradecer pelos novos seguidores, é um sinal de que estão reconhecendo e gostando do meu trabalho, muito obrigada, mesmo.

Hoje resolvi trazer um tutorial de um efeito para postadores, fica bem fofinho, achei lá no Chá & Cupcake (créditos). Abaixo está o resultado, se quiserem aprender é só clicar em 'Mais Informações'.

Normal:

   

Hover:

1. Crie ou pegue alguma imagem com 200 de altura e 100 de largura. Se não achar e não conseguir fazer, pegue alguma dessas:

   

Créditos: x

2. Crie um gadget Html/JavaScript e cole esse código:

<a href="LINK DO BLOG"><img src="http://static.tumblr.com/qqvkww7/jdQlz92b3/transparent.png" height="200px" width="200px" class="postador1" /></a>

Em 'LINK DO BLOG' cole o link do blog, facebook ou qualquer outro site do postador.

3.Vá em Modelo > Personalizar > Avançado > Adicionar CSS e cole este código:

.postador1 {     background: transparent url('URL DA IMAGEM') no-repeat bottom center;     width: 100px;     height: 100px;     margin-left: 0px;transition-duration: 0.5s;    -webkit-transition-duration: 0.5s;    -moz-transition-duration: 0.5s;}.postador1:hover {     background: transparent url('URL DA IMAGEM') no-repeat  top center;     width: 100px;     height: 100px;transition-duration: 0.5s;    -webkit-transition-duration: 0.5s;    -moz-transition-duration: 0.5s;}

Preencha com o que se pede e salve, você vai ver que agora o código funcionou.

Beijos!