Personalizando as imagens do blog com CSS

Compartilhar:
Hoje vamos aprender a personalizar as imagens do seu blog com o estilo CSS. Vamos colocar bordas, bordas hover e transition. Vamos deixá-las mais chiques. No meu vocês podem perceber que há um box-shadow nas imagens, mas para não ficar igual, eu retirei o shadow do código que irei disponibilizar e coloquei o efeito hover

Ele é bem útil, alem de não deixar seu blog pesado, fica ao seu gosto. Lembrando que você pode personalizar as cores e adicionar mais efeitos se preferir. Vamos começar.
1. Acessando a guia Modelo de seu blog, clique no botão Editar HTML. Logo depois pressione Ctrl+F para abrir a janela Localizar e busque pela tag abaixo.
.post-body img
2. Se você utiliza os templates oficiais do Blogger, seu código deverá ser como o abaixo. Caso seja templates criados por terceiros, deverá estar em outro modo. Veja o código abaixo.
Vale lembrar que este é o código referente as imagens do blog. Estou usando o template oficial do Blogger Espetacular Ltda. 

.post-body img {  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);
  -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  -moz-border-radius: $(image.border.radius);
  -webkit-border-radius: $(image.border.radius);
  border-radius: $(image.border.radius);
}
3. Destaquei de onde o código se inicia e onde ele termina. Depois, substitua todo o código acima por este outro código.
.post-body img {padding: 6px ;background: transparent ;-webkit-transition: all 0.8s linear ;border: 1px solid #C8C6C6 ;-webkit-border-radius: 8px ;-moz-border-radius: 8px ;border-radius: 8px ;transition: all 0.3s ease ;-webkit-transition: all 0.8s ease ;-o-transition: all 0.8s ease ;-moz-transition: all 0.8s ease;}
.post-body img:hover {border: 1px solid #333;}
4. Depois, clique em Visualizar para ver se estar de acordo com seu gosto. Logo depois clique em Salvar modelo.

Pronto, suas imagens estão personalizadas. Lembrando que você pode adicionar mais efeitos como o box-shadow, aumentar as bordas, retirar o transition que há nas bordas, etc. Boa sorte e abraços.
► Postagens Relacionadas:

2 Comentários

Phillip Johnson disse...

Olá amigo tem como eu colocar esse feito em determinadas imagens por exemplo queria colocar esse efeito nas imagens de parceria do meu site, ou se tiver um outro efeito bem legal entra em contato se poder. Meu site: www.CartoonHumor.com.br | E-mail: Contatocartoon@live.com

3 de dezembro de 2011 23:04
João Neto disse...

Phillip Johnson, para você personalizar determinas imagens na sidebar (vamos supor), você terá que criar uma CLASSE (div) para as imagens do gadget e depois adicionar os atributos. Logo após basta adicionar as divs de inicio e de fechamento no HTML/JavaScript do gadget de parceiros. Este é a forma mais fácil que encontrei. Espero lhe ter ajudado.

4 de dezembro de 2011 19:35

Postar um comentário