4 Efeitos Para Afiliados

Bom Dia!!! Depois de meses sem atualizar o blog eu resolvi voltar a trazer alguns tutoriais para vocês *-* Eu comecei a fazer faculdade e o primeiro semestre mesmo não sendo tão corrido me deixou com menos tempo que o habitual e só agora resolvi dedicar um tempinho para atualizar o My Fluffy Rainbow.

O tutorial de hoje são 4 efeitos para serem usados nos afiliados do blog ou mesmos em um menu com imagens. São efeitos feitos por mim então se usar coloque os devidos créditos.

1° Efeito (Preview):

1° Passo: Vá em Modelo > Editar HTML.

2° Passo: Procure por(Usando Ctrl+F): ]]></b:skin>

3° Passo: Cole acima de "]]></b:skin>" o código abaixo:

/*-----Inicio do Efeito Para Afiliados por meumundo-meuestilo.blogspot.com.br-----*/
.afiliados{
-webkit-transition-duration: 1.20s;
}
.afiliados:hover{
-webkit-transform: rotate(360deg);
-webkit-border-radius: 50px; 
-moz-border-radius: 50px; 
border-radius: 50px;
}
/*-----FIM do Efeito Para Afiliados por meumundo-meuestilo.blogspot.com.br-----*/

4° Passo: Salve as Alterações.
5° Passo: Coloque nos Gadgets em que deseja colocar os afiliados:

<a href="http://www.blogger.com/LINK" title="TITULO"><img class="afiliados" src="IMAGEM" /></a>

6° Passo: Altere os locais indicados e salve.

2° Efeito (Preview):

1° Passo: Vá em Modelo > Editar HTML.

2° Passo: Procure por(Usando Ctrl+F): ]]></b:skin>

3° Passo: Cole acima de "]]></b:skin>" o código abaixo:

/*-----Inicio do Efeito Para Afiliados 2 por meumundo-meuestilo.blogspot.com.br-----*/

.afiliadoss{

-webkit-border-radius: 50px; 

-moz-border-radius: 50px; 

-webkit-transition-duration: 1.20s;

}

.afiliadoss:hover{

-webkit-border-radius: 50px; 

-moz-border-radius: 50px; 

border-radius: 50px;

}

/*-----FIM do Efeito Para Afiliados 2 por meumundo-meuestilo.blogspot.com.br-----*/

4° Passo: Salve as Alterações.
5° Passo: Coloque nos Gadgets em que deseja colocar os afiliados:

<a href="http://www.blogger.com/LINK" title="TITULO"><img class="afiliadoss" src="IMAGEM" /></a>

6° Passo: Altere os locais indicados e salve.

3° Efeito (Preview):

1° Passo: Vá em Modelo > Editar HTML.

2° Passo: Procure por(Usando Ctrl+F): ]]></b:skin>

3° Passo: Cole acima de "]]></b:skin>" o código abaixo:

/*-----Inicio do Efeito Para Afiliados 3 por meumundo-meuestilo.blogspot.com.br-----*/

.afiliadosss{

border-radius: 50px;

-webkit-filter: none; -webkit-transition:all 1s ease;

}

.afiliadosss:hover{

border-radius: 50px;

-webkit-filter: saturate(5);

-webkit-transition:all 1s ease;

}

/*-----FIM do Efeito Para Afiliados 3 por meumundo-meuestilo.blogspot.com.br-----*/

4° Passo: Salve as Alterações.
5° Passo: Coloque nos Gadgets em que deseja colocar os afiliados:

<a href="http://www.blogger.com/LINK" title="TITULO"><img class="afiliadosss" src="IMAGEM" /></a>

6° Passo: Altere os locais indicados e salve.

4° Efeito (Preview):

1° Passo: Vá em Modelo > Editar HTML.

2° Passo: Procure por(Usando Ctrl+F): ]]></b:skin>

3° Passo: Cole acima de "]]></b:skin>" o código abaixo:

/*-----Inicio do Efeito Para Afiliados 4 por meumundo-meuestilo.blogspot.com.br-----*/

.afiliadossss{

-webkit-transition-duration: 1.20s;

-webkit-filter: none; -webkit-transition:all 1s ease;

}

.afiliadossss:hover{

-webkit-filter: hue-rotate(180deg);

-webkit-transition:all 1s ease;

-webkit-transform: rotate(360deg);

-webkit-border-radius: 50px; 

-moz-border-radius: 50px; 

border-radius: 50px;

}

/*-----FIM do Efeito Para Afiliados 4 por meumundo-meuestilo.blogspot.com.br-----*/

4° Passo: Salve as Alterações.
5° Passo: Coloque nos Gadgets em que deseja colocar os afiliados:

<a href="http://www.blogger.com/LINK" title="TITULO"><img class="afiliadossss" src="IMAGEM" /></a>

6° Passo: Altere os locais indicados e salve.

Espero que tenham gostado dos efeitos <3 Nessa semana teremos mais postagens programadas <3