Colocando bordas hover nas imagens que você desejar

Olá gente, 

Quem aqui já viu essas bordas das imagens assim como a ilustração desse post? vamos aprender como fazer isso?

Primeiro vá em  Design  Editar HTML Ctrl + F (caixa de pesquisa) e procure por:

]]></b:skin>

Acima desse código, cole esse aqui: 

.efeitoimagem {

transition-duration: 1s;

-moz-transition-duration: 1s;

-webkit-transition-duration: 1s;

border: 3px solid #FF69B4; /*espessura, tipo e cor de borda*/

}

.efeitoimagem:hover {

transition-duration: 1s;

-moz-transition-duration: 1s;

-webkit-transition-duration: 1s;

opacity: .6; /*opacidade*/

border: 3px solid #40E0D0; /*espessura, tipo e cor da borda quando hover*/

}

Agora para usar esse efeito nas imagens que você quiser, quando você estiver fazendo sua postagem, tem duas opções certo? ESCREVER|HTML, você clica em HTML, aí cole esse link:

<img src="URL da imagem" class="efeitoimagem"/></a> 

Aonde está escrito 'URL DA IMAGEM' você coloca a url da sua imagem, você pode colocar esse efeito nos afiliados ou na foto do 'welcome' do blog se preferir, eu acho esse tutorial super fofo pois dá um toque à mais nas imagens, você pode usar essa tabela aqui para editar as cores no seu HTML ^_^

Beijos