Criando Efeitos nas Imagens

 Faça sempre backup do seu template antes de modificá-lo ,   ou tenha um blog de testes, caso algo dê algo errado.

Efeito Bordas Arredondadas

Vá em Modelo => HTML =>  ]]></b:skin>

#Normal

#Ao passar o Mouse

Coloque este código abaixo antes de ]]></b:skin>

.post img {-webkit-transition-duration: .50s;border-radius: 10px 10px 10px 10px;}.post img:hover {-webkit-transition-duration: .50s;border-radius: 200px 200px 200px 200px;}

***Para aumentar o arredondamento dos cantos em estado normal

aumentar os valores: border-radius: 10px 10px 10px 10px

Se quiser a imagem sem arredondamento em estado normal, troque os valores por 0

***Para aumentar o arredondamento dos cantos em estado hover

aumentar os valores: border-radius: 200px 200px 200px 200px 

Efeito Preto e Branco

#Normal

 #Ao passar o Mouse

Coloque este código abaixo antes de ]]></b:skin>

post img {-webkit-filter: saturate(100%) ;-webkit-transition-duration: .90s;}.post img:hover {-webkit-filter: saturate(0%) ;-webkit-transition-duration: .90s;}

***É só passar o mouse sobre à imagem prá ver esse efeito

Efeito Bordas nas Imagens

#Normal

#Depois

Coloque este código abaixo antes de ]]></b:skin>

.post img{-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; border: 1px solid #dddddd;padding: 5px;}

***Nesse efeito voce pode colocar a  borda que desejar: solid- sólido; dotted - pontilhada; dashed - tracejada e  double - dupla.

***Em: #dddddd, troque pela cor desejada. Tabela de cores:  AQUI

***Tamanho da borda: Altere o 1px para largura

***Se quiser a imagem sem arredondamento em estado normal, troque os valores por 0 

***Se desejar retirar qualquer um dos efeitos acima é só apagar que as imagens voltam ao normal.

Muito fácil né? e seu blog vai ficar lindão.