Personalizando as imagens do blog com CSS

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.