25 fevereiro 2012

Tutorial - Efeito Opacidade nas Imagens das Postagens


Minhas lindas! :)

Trouxe um novo tutorial para vocês, como colocar o efeito opacidade nas imagens! O efeito opacidade ou opacity, é bastante usado nos blogs, ele deixa as imagens mais apagadas e quando você passa o cursor nelas, elas volta ao normal. Vamos aprender?

Dica: Antes de alterar qualquer coisa no HTML do seu blog, salve o modelo completo, para que não ocorra possíveis danos no design.

1º passo: Vá até o HTML do seu blog, dê um CTRL+F e procure por: ]]></b:skin>

2º passo: Após achar, cole o código abaixo, acima dele:

.main img {
filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
}
.main img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
duration: 50s;
}

3º passo: Clique em Visualizar e se tiver tudo certinho clique em Salvar Modelo. Caso não tenham dado certo, tente fazer o tutorial novamente.

Agradeço ao blog Bomba de Glitter pelo código, em breve mais um tutorial  e lembrem-se é proibido repassar este tutorial, mesmo colocando os créditos.

3 comentários:

Flávia disse...

Tem uma tag pra você lá no meu blog *-*
http://wwwflavynhasz.blogspot.com/2012/02/tag.html

Betina disse...

Adorei o tuto e o blog!
Usei no meu,ok?!
Seguindo aqui o/
Beijo!
http://sweetstarblog.blogspot.com/

Carla Carvalho disse...

AAAAAin adorei o tutorial! Sempre achei isso fofinho nos blos, mas nunca me preocupei com isso. Mas qdo vi o tuto aq, e tao facinho resolvi fazer. Ficou certinho. Obg!
bjs

carlinha-caravlho.blogspot.com