Já estou com uma pessoa em mente para ser a postadora, mas como ainda não decidi se colocarei 1 ou 2 para postarem aqui, deixei o post lá ainda. Espero que isso realmente dê certo, já que sempre tive receio em relação a colocar postadores aqui.
Hoje eu trouxe um efeito para ser usado em elites de afiliados. Obviamente, se você quiser não precisa usar em elites apenas, pode ser colocado em diversos lugares no seu blog. Pela primeira vez, para fazer ele usei Keyframe. Eu aprendi a usar em um tutorial explicando tudo no HTMLuv, e a partir dele criei meu código. Na preview eu coloquei 3 tipos diferentes de imagens. Dá a impressão de que são efeitos diferentes, mas na verdade é só a imagem.
Procure por ]]></b:skin> e acima dessa tag cole:
@-webkit-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
@-moz-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
@-o-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
@-ms-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
.bb{
padding:1px;
}
.bb:hover{
-webkit-animation: bubble 1s;
-moz-animation: bubble 1s;
-o-animation: bubble 1s;
-ms-animation: bubble 1s;
}
Não há nem o que explicar dessa vez. O código é mais ou menos pequeno, e nele só tem o que é necessário para o efeito funcionar, então não precisa mexer em nada. Depois, adicione um gadget de HTML/Javascript e cole:
<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="bb" /></a>Vá adicionando o código acima quantas vezes quiser, para a quantidade de imagens que quiser.
Pronto! O efeito é super fácil e o código é bem pequeno (milagre) já que a maioria dos efeitos que faço o código acaba ficando um monstro gigante. Confesso que gostei de trabalhar com keyframe, e recomendo pra todo mundo. É bem fácil e prático.
Espero que tenham gostado. Beijos ♥
o efeito não funcionou na preview aqui o/
ResponderExcluir:(
acervo-de-livros.blogspot.com
Verdade, acabei de atualizar a preview e o tutorial. Obrigada *-*
ExcluirQue lindooow ;3 Vou usar no próximo layout!
ResponderExcluirblog-censored.blogspot.com
Muito legal, gostei !
ResponderExcluircr4zy-world.blogspot.com.br
Bárbara, pode postar o tutorial do efeito que você usava no layout free da boo, aquele que a imagem se abre pra cá < e pra lá >
ResponderExcluirO efeito é lindo! Pode ensinar o efeito dos seus afiliados deste layout ?
ResponderExcluirKisses, CAT GIRL
Aaaaaaah, se eu não tivesse com um efeito nos meus afiliados =/ Amei o efeito, perfeito demaaaais! Você quem fez? *--* Kisses!
ResponderExcluirJu, do Epílogos e Finais.
Amei esse efeito.
ResponderExcluirhttp://sorvete-de-limao.blogspot.com.br
Muito legal fica os afiliados
ResponderExcluirnunca tinha visto esse efeito!
http://manguitarosa.blogspot.com.br/
beijooos
Que lindo! Nunca tinha visto!!
ResponderExcluirSe gostar segue?
garotadabolsa.blogspot.com
Adorei o tutorial!
ResponderExcluirMuito bom o tutorial,o efeito fica muito Legal ;)... Beijos...
ResponderExcluirAmei seu blog ele é muito lindo...Seguindo... :3
minhas-confissoes-2012.blogspot.com
Oii, sou Isis Maria do blog: Book of Isis (http://book-of-isis.blogspot.com.br/).
ResponderExcluirAmei o seu blog, super-seguindo :D
Segue o meu pfr <3 e vamos, nos afiliar??
Bjo e sucessos!
Comenta lá no blog, a sua confirmação :D
Book of Isis / http://book-of-isis.blogspot.com.br/
Ajudou demais flor , valeu
ResponderExcluirmiss-teensami.blogspot.com
Este comentário foi removido pelo autor.
ResponderExcluir