14.3.12

Voltei & Tutorial: Imagens iguais a do blog

| |
Tumblr_m0vw7jgxsc1rpdr4zo1_500_large
A casa dos meus sonhos

Oi meus amores
E aí? Gostaram do layout do blog? Eu amei e por isso, durante um tempo, vou trocar somente o cabeçalho e outros pequenos detalhes nele. Sabem, para não ficar mudando de layout o tempo inteiro porque isso necessita de tempo e tempo é o que eu não estou tendo ultimamente.
E esse é o motivo do meu sumiço.
Deveres, trabalhos de escola, aula de dança, de teatro, de inglês e eu estou pirando! Mas prometo não deixar o blog de lado, pelo menos três postagens na semana ok?
Agora vamos parar de blá-blá-blá e vamos ao tutorial. Clique em Leia mais para vê-lo.

 


Ok *respira* viram as imagens do blog? Todas redondinhas e com opacidade quando passa o mouse e tal. Eu vim ensinar a fazer isso hoje.

Primeiro, vá no seu HTML, dê ctrl+f e procure por /* Posts .
Achou? Excelente. Agora, abaixo desse código cole o seguinte código:

.post img {
filter:alpha(opacity=82);
-moz-opacity:1.0;
opacity:1.0;
-webkit-transition: 0.5s;
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}
.post img:hover {
filter:alpha(opacity=100);
-moz-opacity:0.82;
opacity:0.82;
duration: 50s;
}

Se você não quiser bordas arrendondadas tire o código em vermelho. Se você quiser que a imagem fique com opacidade normal e quando se passar o mouse ela fique normal coloque em vez do código acima o seguinte código:

.post img {
filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
-webkit-transition: 0.5s;
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}
.post img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
duration: 50s;
}

OBS:Esse tutorial vale apenas para as imagens do post.

Bom, espero que tenham gostado do tutorial. Comentem sobre o que acharam do novo layout e qualquer dúvida é só perguntar ok? 
Beijos!





9 pégasos voaram para o Olimpo:

Tayane Ribeiro disse... [Responder comentário]

ai eu amo esse efeito, amei a tutorial flor e o layout ficou perfeito
beijos
http://lolamantovani.blogspot.com/

Anônimo disse... [Responder comentário]

Ótimo tutorial bem útil por sinal!
Seu Blog é Lindo!
Seguindo!
Segue o Meu?!

http://otherthingsofficial.blogspot.com/

Larissa disse... [Responder comentário]

Lindo novo lay! Adorei o tuto.

http://girlsrepublic-s2.blogspot.com/

Gabriela Oliveira disse... [Responder comentário]

Novo lay ficou lindo. Gostei muito do tutorial, tava procurando um esses dias .

http://modicesdemenina.blogspot.com

Anônimo disse... [Responder comentário]

ahhh, adorei os icones da barra! eu ia alinhar e te passar o code mas vc usa o stiqr dai eu não consigo editar teu css, pena...

da uma olhada nessa parte:
line-height:1px !important /** alinha o texto verticalmente - mude se precisar **/

bjãoo

Júlia disse... [Responder comentário]

Legal o tuto.
Hoy, faz um favor? Você poderia votar na enquete desse blog http://the-lovers-world.blogspot.com em mim? O nome do meu blog é boneca imperfeita, obrigada desde já, isso é muito importante para mim!

HIDEOUT disse... [Responder comentário]

ameei o tutorial suuuper util http://pdisturbia.blogspot.com/

Dani Ribeiro disse... [Responder comentário]

Está tuuuudo lindo aqui :D Amei o novo lay.
O tuto também é demais, só que eu não gosto de efeito nenhum nas imagens do meu blog. Já usei as bordas arredondadas, mas já tirei rs
onthefame.tk

Anônimo disse... [Responder comentário]

Flor vc tem o script do stirq/stiqr bem no final do teu html (stiqr é aquilo q a Jackie ensinou pra personalizar o template) e vc tem 4 (QUATRO) chamadas do jquery!!

bjãoo