Como colocar efeitos nas imagens dos posts

De vez em quando a gente quer dar uma caprichada nas imagens do blog, né?
E saber um efeito legal pra colocar pode ajudar, ainda mais se for algo bem fácil e que a gente pode tirar caso enjoe...
Vou ensinar alguns efeitos, você escolhe qual usar ou testar primeiro, tá?

Primeiro efeito- bordas arredondadas

O primeiro efeito arredonda as imagens quando passamos o mouse sobre elas.
Veja aqui o código e o efeito.

Para colocar em seu blog vá ao painel de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e abra o código-fonte de seu blog.
Dentro da caixa de códigos tecle Ctrl+F.
Vai expandir a barra de pesquisa.
Dentro dela digite ]]></b:skin> e tecle Enter para localizar.
ACIMA disso cole este código:

Copiar o código Arredondar

Edite para ficar como você deseja:
→ Para aumentar o arredondamento da imagem em estado normal altere os valores em border-radius: 10px 10px 10px 10px;
Se quiser deixar a imagem sem arredondar no estado normal troque os valores por 0.

→ Para alterar o grau de arredondamento nas imagens em estado hover altere em border-radius: 200px 200px 200px 200px;
Se quiser arredondar só um ou 2 lados, mexa nos valores até ficar como deseja.

Salve.
Tá feito, simples e fácil.
Se desejar retirar basta excluir o código e tudo volta a ser como era.

Segundo efeito- Imagem em preto e branco

Esse efeito é lindo!
Ele coloca a imagem em preto e branco quando passamos o mouse sobre ela.
Veja aqui o efeito!
Passe o mouse sobre a imagem e veja que lindo!

Para colocar em seu blog cole, acima de ]]></b:skin> este código:

Copiar o código Preto & Branco
Salve, e tá feito.
Se um dia quiser tirar exclua o código e salve.

Terceiro efeito- Bordas nas imagens dos posts

O último código coloca bordas nas imagens dos posts.
Não tem demonstração porque é bem simples.
Este é o código:

Copiar o código Bordas nas imagens

Faça as alterações desejadas no código:

→ Você pode escolher se quer borda sólida (solid), pontilhada (dotted), tracejada (dashed) ou dupla (double).
→ 1px - Altere o valor de "1" para aumentar a largura da sua borda.
→ Em #dddddd é o código da cor. Troque pela cor que desejar.
→ Define se a borda será ou não arredondada.
Altere os valores para mais ou para menos, conforme desejar. Se quiser borda quadrada coloque 0 como valor.
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Cole o código acima de ]]></b:skin> e salve.
Fica bonitinho e diferenciado...

Facinho, né?
Qual você vai testar em seu blog?
Enjoy!