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:
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:
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:
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:
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
Nenhum comentário:
Postar um comentário