Tutorial - Efeito Hero

Yoo britânicas! Boa tarde!

Bom, não tenho nada à falar, só quero agradecer aos 35 seguidores. Pra mim, ter 35 seguidores é bom já.

Então, hoje eu trouxe um efeito super fofo, que pode ser mais usado na sua elite de afiliados, mas isso vai do seu gosto.

Eu vi esse efeito no One Dí Things, então os créditos para esse efeito vão todos ao ODT.

Preview do efeito aqui.

Primeiramente, vá em Modelo ~> Editar HTML ~> Ctrl +F e procure por ]]></b:skin>. Acima dessa tag, cole o seguinte código:

@-webkit-keyframes hero {
50% {transform: rotate(16deg) ;
-webkit-transform: rotate(16deg) ;
-moz-transform: rotate(16deg) ;
-o-transform: rotate(16deg) ;
-ms-transform: rotate(16deg) ;}
75% {transform: rotate(-16deg);
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
-ms-transform: rotate(-16deg) ;}
100% { transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
-ms-transform: rotate(0deg) ; }
}
.hero {display: inline-block; border-radius: 5px; margin: -1px; -webkit-transition-duration: .50s; OPACITY: 0.5; outline-style:dotted;
outline-width:1px;
outline-color: transparent;
outline-offset: -5px;}
.hero:hover { -webkit-animation: hero .5s alternate linear; OPACITY: 1; outline-style:dotted;
outline-width:1px;
outline-color: #fff;
outline-offset: -5px;}

Não mudem NADA! Apenas salvem.

Agora, em um gadget HTML/JavaScript, colem o código:

<a href="LINKDOBLOG"><img class="hero" src="LINKDAIMAGEM" title="TITULODOBLOG" /></a>

Troquem apenas o que está em negrito. Para mais imagens no gadget, só continuar ir repetindo o código e ir trocando o que querem.