Widget imagem com efeito Shake
Autor: Caiume | Publicado: 2013-07-21T22:11:00-03:00


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:

http://tecnoblogoficina.blogspot.com.br/



- 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.&nbsp;Faça login no Blogger

2.&nbsp;Em seguida no menu suspenso, clique em Layout

3.&nbsp;Em seguida clique em Adicionar um Gadget&nbsp;

5.&nbsp;E escolha HTML/JavaScript

4.&nbsp;E no campo em branco, cole o seguindo código:




&lt;a href="URL_DE_DIRECIONAMENTO" target="_blank"&gt;&lt;img src="IMAGEM_DO_WIDGET" title="TÍTULO_A_APARECER" alt="TEXTO_AO_PASSAR_MOUSE_SOBRE_A_IMAGEM"/&gt;&lt;/a&gt; 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;"&gt;&lt;/a&gt;

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



2.&nbsp;Em seguida no menu suspenso do&nbsp;início&nbsp;do blogger, clique em Modelo.

3.&nbsp;Em seguida clique no botão em Editar HTML

4.&nbsp;E procure pela seguinte tag:

]]&gt;&lt;/b:skin&gt;

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); }}&nbsp;

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