Efeitos para Afiliados + Imagens - Blog

Yooooo! Como vcs estão?? Ultimamente estou tendo uns pesadelos super bizarros, e infelizmente acabo acordando cedo, por isso o post de hoje não saiu mais cedo (eu estava morta de cansaço). Como eu não gosto de deixar o blog desatualizado,trago para vocês um Tutorial!!! Ebaaa! ♥

O tutorial de hoje é para os Afiliados, colocarei 3 modelos de efeitos diferentes, espero do fundo do meu coração que vocês gostem! Se quiser conhecer os efeitos, Leia mais...
Então bora botar a mão na massa?? Os Previews dos modelos estão ♥AQUI!♥

"Lembrando que o blog do Preview esta um merda eu ainda não tive nenhum tempo de organizar."

-------------------------------------------------------------------------------------------------------------------------

Efeito Spin

1° Modelo

Procure por  ]]></b:skin> e acima dessa tag cole:

.spineffect{max-width:85px;-moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}    .spineffect:hover{-webkit-animation-name: spin;    -webkit-animation-duration: 400ms;    -webkit-animation-iteration-count: 2;    -webkit-animation-direction: alternate;}@-webkit-keyframes spin {from {opacity: .99;    -webkit-transform:rotate(0deg);    -o-transform:rotate(0deg);    -moz-transform: rotate(0deg);}    to {opacity: .30;     -webkit-transform:rotate(360deg);    -o-transform:rotate(360deg);    -moz-transform: rotate(360deg);}}

Aconselho não mexer em nada deste código, porque o efeito pode não funcionar corretamente.

Depois de feito o primeiro passo, adicione um Gadget de  HTML/Javascript e nele cole:

<a href="LINK DO BLOG"title="NOME DO BLOG"><img src="LINK DA IMAGEM"   class="spineffect"/></a>

-------------------------------------------------------------------------------------------------------------------------

Efeito Single

2° Modelo

Procure por  ]]></b:skin> e acima dessa tag cole:

@-webkit-keyframes bubble {
 25%   { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}50% { -webkit-transform: rotate(50deg); }}@-moz-keyframes bubble {25%   { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}50% { -webkit-transform: rotate(50deg); }}@-o-keyframes bubble {25%   { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}50% { -webkit-transform: rotate(50deg); }}@-ms-keyframes bubble {25%   { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);} 50% { -webkit-transform: rotate(50deg); }}
.bb{padding:1px;}.bb:hover{-webkit-animation: bubble 1s;-moz-animation: bubble 1s;-o-animation: bubble 1s;-ms-animation: bubble 1s;}

Não há necessidade de mexer em nada neste código. Ele já funciona corretamente!

Depois é só adicionar um Gadget de HTML/Javascript e nele cole:

<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="bb" /></a>

-------------------------------------------------------------------------------------------------------------------------

Efeito Opacidade

3° Modelo

Procure por  ]]></b:skin> e acima dessa tag cole:

.elitepom {
-webkit-transition: opacity 0.8s linear;
opacity: 0.6;
margin: 1px 4px 0 0;
padding: 2px;
transition:all 0.8s linear;
-moz-transition:all 0.8s linear;
-webkit-transition:all 0.8s linear;
-o-transition:all 0.8s linear;
}
.elitepom:hover {
-webkit-transition: opacity 0.8s linear;
opacity: 1;
transition:all 0.8s linear;
-moz-transition:all 0.8s linear;
-webkit-transition:all 0.8s linear;
-o-transition:all 0.8s linear;
}

Depois adicione o Gadget de  HTML/Javascript e nele cole:

<a href="URL DO BLOG" title="NOME DO BLOG"><img class="elitepom" src="URL DA IMAGEM" /></a>

* Imagens * 

50x50

55x55

As imagens redondas foram feitas por mim! Se usarem elas creditem Porfavor!! 

Créditos: ♥ ♥ ♥ 

Por hoje é só, estou morrendo de sono, preciso mimi zzzzz~ Espero que tenham gostado da postagem, comente se lhe foi útil e não se esqueça de participar do blog ! Kissus ♥