Efeito Hero

março 29, 2013,2 Comments

Para fazer esse tuto,  tem apenas alguns passos.

Vá em Modelo → Editar HTML → Ctrl + F e procure por:

]]></b:skin>

Em cima dessa tag você cola esse 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 precisa alterar nada depois é só salvar, agora para que o efeito pegue.
Vá em Layout → Adicionar gadget → HTML/JavaScript
lá você cola esse código:

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

 Troque só o que está em negrito, para aparecer mais imagens é só ir repetindo o código.
Pode usar qualquer tipo de imagem, de qualquer tamanho.