Efeito Extremo - Colocar Efeito Balançando Onde Você Quiser No Blogger - Exclusivo

Nesta postagem venho compartilhar um código semelhante ao que já havia mostrado no post - Efeito Imagens Balançando No Blogger. Mas, só que dessa vez, consegui aplicar o efeito a qualquer área do blogger. Com isso, tenho certeza de que seu blogger ficará mais chamativo neste requisito. Espero que gostem!!!

Primeiramente vamos aplicar o efeito ao blogger... Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrada a tag, cole ACIMA dela o seguinte código

/* Animação em qualquer área do blogger by DicasHot*/
.sidebar h2, .tabview h2, .post-title, img {
animation-name: getar-ut;
-moz-animation-name: getar-ut;
-webkit-animation-name: getar-ut;
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes getar-ut {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes getar-ut {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes getar-ut {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

Tendo colado o código, se você não quiser colocar o efeito em mais outro lugar, basta salvar e pronto!!!

Colocando o Efeito Em Outras Áreas do Blogger

Como havia dito no início do post, você pode colocar em qualquer lugar o efeito, basta você saber a tag da área que você deseja colocar o efeito. Ou seja, cada tag, corresponde a uma área do blogger.

O efeito Está aplicado ao título das postagens, as imagens e o título da sidebar (barra lateral).

Caso você queira adicionar mais uma área para o efeito ser aplicado, basta você colocar o nome da área e separar com virgula, como no exemplo abaixo:

.sidebar h2, .tabview h2, .post-title {

No exemplo abaixo adicionei mais uma área para o efeito, "falei" para o efeito funcionar em todas as imagens do blogger também.

.sidebar h2, .tabview h2, .post-title, img {

Se você quiser remover o efeito de certas áreas do blogger, basta tirar a tag correspondente ao efeito.

Qualquer dúvida, não deixe de perguntar.