Oi gente, tô fazendo esse post no note e é super estranho depois de tantos meses. Enfim, vou fazer um tutorial de um efeito que eu amo, que muito tempo atrás aprendi no tumblr (muito mesmo, 5 anos atrás acho).
Mas fala logo, como fica esse efeito?
Você coloca a imagem que quiser, e quando passa o mouse em cima, ela aumenta. Simples! E se você souber um pouco de HTML pode combinar outro tutorial com esse, mas por enquanto faça o jeito simples pra ver se dá tudo certo, okay?
Então vamos pro tutorial.
Ah, e eu odeio o novo editar HTML e Design do Blogger, só isso mesmo.
Bom, primeiro vá em modelo > editar HMTL.Coloque acima do seu CSS, que é o código }]]></b:skin>, esse código:
.bordinha{-moz-border-radius: 4px; -webkit-border-radius: 4px;-webkit-transition: 0s linear; -webkit-transition: opacity 0.6s linear;-webkit-transition: all 0.8s linear;-webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear;}Visualize pra ver se nada está errado no blog, e salve.
.bordinha:hover {-webkit-transform: scale(2.10);-moz-transform: scale(2.10);}
Agora, vá em Layout, adicione um novo gadget HTML/JavaScript, e use esse código onde quer que fique o efeito:
<a target="_blank" href="LINK"><img src="LINKDAIMAGEM" class="bordinha" width="53px;" title="NOME" /></a>Onde está em negrito, é o link que você quer colocar na imagem. Em itálico é o endereço da imagem que você quer colocar, e em sublinhado é a palavra que você quer que apareça quando colocar o mouse em cima da imagem.
Onde está grifado de amarelo, é o tamanho da imagem que você quer que fique antes de aumentar, ou seja, o tamanho normal dela. Você pode deixar assim ou mudar, fica do jeito que você desejar.
E é só isso mesmo, se vocês quiserem modificar o código e tiver alguma dúvida, só deixar um comentário em qualquer post que irei responder.
Beijo, beijo.
Nenhum comentário:
Postar um comentário