Autores - Efeito Shake Hover

Yoo ~ 

Antes de ensinar queria dar um aviso. A Oak teve que sair do blog. Ela não estava conseguindo manter o BC e o blog dela, então é logico que ela prefere dar os momentos livres dela ao blog dela. Por isso então, no grupo do KW no Facebook, eu perguntei se alguém queria postar, e graças a Deus, a Vicky e a Letícia quiseram participar. Essa semana ainda vocês iram ver os posts delas.E por causa disso também teremos mais tutoriais sobre Photoscape, muitas pessoas não sabem ou não tem o PS instalado no pc, e o Photoscape quase todo mundo usa ou já usou \o 

Mais em fim, eu aqui AINDA sem pedidos na ask, decidi trazer um tutorial que eu acho bem legal, e estou pretendendo usar no meu próximo layout. Ele se chama Efeito Shake Hover, que você pode usar nos autores do seu blog. É bem legal, eu recomendo. Você pode ver o efeito aqui. Vamos lá ~

- Primeiro crie uma imagem, ela deve ser como a imagem abaixo: 

- Apos criar, hospede ela em algum servidor e deixe lá. 

- Agora procure por ]]></b:skin> e acima dele cole:

@-webkit-keyframes efeitomod {

50% {-webkit-transform: rotate(-4deg);}

75% {-webkit-transform: rotate(3deg); }

100% {-webkit-transform: rotate(0deg); }

}

.mode {

background: url(LINK DA IMAGEM); 

height: 100px; width:200px; 

display: inline-block;

}

.mode:hover {

-webkit-animation: efeitomod .5s alternate linear; 

background-position: bottom;

}

- Substitua as partes em Negrito. Em Heigh é a altura da imagem que você fez. Mas preste atenção, você tem que por a metade da altura total da imagen. Ex.: Sua imagem tem a altura total de 200px, você vai só por a metade, que seria 100px. Em Width é a largura da imagem, você tem que colocar a altura total da imagem.

- Agora para usar, vá em uma Gadget HTML/Javascript e cole: 

<a class='mode' href='LINK'/>

OBS:Se o seu blog tem por exemplo 3 postadores, você tem que criar uma class para cada pessoa desse jeito: 

.NomedoPostador {

background: url(LINK DA IMAGEM); 

height: 100px; width: 200px; 

display: inline-block;

}

.NomedoPostador:hover {

-webkit-animation: efeitomod .5s alternate linear; 

background-position: bottom;

} 

Substitua o ''NomedoPostador'' pelo nome do postador do seu blog e depois na gadget cole: 

<a class='NomedoPostador' href='LINK'/>

Substituindo o ''NomedoPostador'' pelo mesmo nome que você colocou no código.