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!
amo o tutorial
ResponderExcluirhttp://kawaiiday.blogspot.pt/
;)
ExcluirBeijos
Muito criativo esse tutorial e belas imagens também :D
ResponderExcluirquirky-tree.blogspot.com.br
*-*
Excluir