terça-feira, 14 de maio de 2013

Tutorial- Efeito das autoras.

~ Bom pessoal eu vou estar postando o primeiro tutorial aqui, primeiramente eu vou deixar os créditos, esse tutorial ñ é de minha autoridade ele é do blog Miki Candy.




No Blogger, vá em Design > Editar HTML. Tecle Ctrl F e procure por ]]> e em cima dele cole:

.equipe {
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear; /* Efeito fade */
-webkit-box-shadow: 0 0 .3em #000000; /* Sombra */
filter:alpha(opacity=65); /* Opacidade */
-moz-opacity:0.65;
opacity:0.65;
cursor: crosshair; /* Cursor */
}
.equipe:hover {
-webkit-box-shadow: 0 0 .3em #000000; /* Sombra */
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear; /* Efeito fade */
-webkit-border-radius: 72px; /* Bordas arredondadas */
-moz-border-radius: 72px;
border-radius: 72px;
filter:alpha(opacity=100); /* Opacidade */
-moz-opacity:1.0;
opacity:1.0;
cursor: crosshair; /* Cursor */
}




Salve. Vá em layout > Adicione um gadget de HTML/ Javascript e cole nele o seguinte código:

<a href="URL 1" target="_blank"><img src="IMAGEM 1" border="0" class="equipe" title="NOME 1"/></a> <a href="URL 2" target="_blank"><img src="IMAGEM 2" border="0" class="equipe" title="NOME 2"/></a><a href="URL 3" target="_blank"><img src="IMAGEM 3" border="0" class="equipe" title="NOME 3"/></a> <a href="URL 4" target="_blank"><img src="IMAGEM 4" border="0" class="equipe" title="NOME 4"/></a>


 Depois mudem as partes sublinhadas e pronto! Eu espero ter ajudado vcs e até os próximos posts.


~ Chu 




Nenhum comentário:

Postar um comentário