Widget imagem com efeito Shake

► +A +/- -A
Olá amigos! Quanto tempo né? Pois é, por motivos escolares (motivos escolares? Nada a ver Hein...) fiquei esse extenso e longo período sem atualizar por meio de postagens o nosso querido Tecnoblog, de certa forma serei beneficiado, pois irei trazer mais tutoriais em breve para vocês, leitores. (Continue lendo para acompanhar o artigo/tutorial)
Bom, sem mais demandas vamos começar com o tutorial de hoje, bem, como você leu "Widget imagem com efeito Shake", esse tutorial consiste basicamente em um Widget de uma imagem que possui um efeito Chamado Shake, "Como assim Shake?" Segundo ao nosso querido Google Translate (Tradutor) Shake significa "Tremer" mas eu prefiro o termo "Balançar" (eahaeuhaeuhauea)... Desde já, irei vos passar o link da preview do Widget.

Oficina Tecnoblog:

- Onde se encontra o preview/widget?
R: Sidebar
- Qual título do Widget para mim saber qual é?
R: Exemplo Widget Shake

Então bora lá para o tutorial!

Do Layout ao Modelo

1. Faça login no Blogger
2. Em seguida no menu suspenso, clique em Layout
3. Em seguida clique em Adicionar um Gadget 
5. E escolha HTML/JavaScript
4. E no campo em branco, cole o seguindo código:

<a href="URL_DE_DIRECIONAMENTO" target="_blank"><img src="IMAGEM_DO_WIDGET" title="TÍTULO_A_APARECER" alt="TEXTO_AO_PASSAR_MOUSE_SOBRE_A_IMAGEM"/></a> border="3" width="240" height="235" class="shake" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=50" style="opacity: 0.8;"></a>

Após isso salve, e guarde, e não modifique nada.
Em seguida...


2. Em seguida no menu suspenso do início do blogger, clique em Modelo.
3. Em seguida clique no botão em Editar HTML
4. E procure pela seguinte tag:
]]></b:skin>

E acima da tag que citei cole o seguinte código:
.shake{
display:inline-block;
}
.shake:hover,
.shake:focus{
animation-name: shake;
animation-duration: 2.8s;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-name: shake;
-moz-animation-duration: 0.8s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-name: shake;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@keyframes shake{
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 shake{
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 shake {
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); }
}
@-webkit-keyframes adjustHue {
0% { -webkit-filter: hue-rotate(30deg); }
10% { -webkit-filter: hue-rotate(60deg); }
20% { -webkit-filter: hue-rotate(90deg); }
30% { -webkit-filter: hue-rotate(120deg); }
40% { -webkit-filter: hue-rotate(150deg); }
50% { -webkit-filter: hue-rotate(180deg); }
60% { -webkit-filter: hue-rotate(210deg); }
70% { -webkit-filter: hue-rotate(240deg); }
80% { -webkit-filter: hue-rotate(270deg); }
90% { -webkit-filter: hue-rotate(300deg); }
100% { -webkit-filter: hue-rotate(330deg); }

Bom, pessoal, em seguida de todo esse processo clique em visualizar e se estiver tudo como desejado, Salve o Modelo.

Espero que tenha ajudado, contribuído para todos vocês!
Até a próxima :D

► Postagens Relacionadas:

4 Comentários

Caio Vinicius disse...

Irei atualizar o código em breve, Obrigado por informar..

21 de dezembro de 2013 às 02:01
Caio Vinicius disse...

Entendo Matheus, irei atualizar o artigo, se quiser passar pra dar uma olhada novamente, fique a vontade. Até mais. :D

21 de dezembro de 2013 às 02:02
Guilherme disse...

Muito bom esse novo modelo! Realmente livra a galera dos prejuízos e é bem mais fácil! Já sou adepto do Cuponzeria.com

24 de janeiro de 2014 às 05:47
André E. Simões disse...

Ola, se eu colocar vc como admin do meu blog, vc não colocaria pra mim, pois eu segui o passo a passo, mas não deu!

5 de maio de 2015 às 22:02

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!