Efeito de "Moldura" em imagens selecionadas + como editá-lo

Olá!
Eu devo confessar que estou animada por conseguir recuperar algumas coisas, mesmo estando completamente enferrujada.
Ainda que eu tenha gostado de como esse template ficou, acho que vou acabar dando umas alterações no layout, já que venho relembrando e reaprendendo várias coisas então é capaz de eu demorar um pouco pra sossegar com uma coisa só.
Enfim, eu trouxe hoje um dos efeitos que eu mais gosto pra imagens e que antigamente (a velha), costumávamos utilizar na aba de afiliados, blogs parceiros, moderadores e por aí vai. O efeito pode ser observado aqui no blog mesmo mesmo e é bem simples de ser alterado. Vou fazer o meu melhor para explicar linha por linha do código e espero que gostem.
Vamos lá?

Visualização (passe o mouse por cima das imagens):

 A primeira coisa que você deve procurar no seu HTML é a seguinte palavra-chave:

 ]]></b:skin>

Logo acima dela, cole esse código:

.moldura {
border:2px solid #ffffff;
-webkit-box-shadow: 0px 0px 9px #E0E0E0;
-moz-box-shadow: 0px 0px 9px #E0E0E0;
box-shadow: 0px 0px 9px #E0E0E0;
margin:1px;
opacity: 0.6;
-webkit-filter:grayscale(1);
-webkit-transition-duration: .90s;
-moz-transition-duration: .90s;}
 .moldura:hover {
opacity: 1;
-webkit-filter:grayscale(0);
-webkit-transition-duration: .90s;
-moz-transition-duration: .90s;} 

Agora, vamos para a personalização do efeito.

☆ border:2px solid #ffffff; - Essa linha faz com que a sua borda tenha 2px de espessura. Você deve alterá-la para um valor maior caso queira uma borda mais grossa ou menor, para uma mais fina. Assim como "solid" é o estilo da borda, o que significa que ela será preenchida por igual. Você pode alterar para outros estilos de preenchimento, como dashed (tracejado), double (dulpa), dotted (pontilhado), inset e por aí vai.

☆ #FFFFFF e #E0E0E0 são comandos de cores Hex. #FFFFFF é a cor branca da borda e deve ser alterada para a cor que você preferir na sua borda, enquanto #E0E0E0 é um tom de cinza para o efeito de sombreado e sobreposto. Se não quiser esse efeito, você pode simplesmente apagar essas três linhas.

☆ margin:1px; é a margem de espaço entre uma imagem e outra.

☆ opacity: 0.6; é o efeito de opacidade da imagem antes do hover, ou seja, antes de "passar o mouse por cima". Se não quiser a imagem opaca, altere para 1 ou apague a linha.

Não altere o restante. 

Fazendo tudo isso, você já tem no seu HTML o efeito, agora é escolher o lugar em que quer usar. Você pode utilizar em um gadget ou nas próprias postagens. 

☆ Se o seu objetivo for utilizar em um gadget, você deve ir em Layout, no centro de comando do blogger, clicar em "adicionar um gadget" e selecionar a opção "Gadget HTML/JavaScript". 

☆ Se seu objetivo for utilizar no corpo das postagens, altere a opção "Escrever" para "HTML", localizado na extremidade esquerda da barra de formatação da postagem.
Em ambas as opções, você vai colar esse comando:

<img class="moldura" src="LINK DA SUA IMAGEM" />

Para inserir um link à sua imagem, cole:

<a href= "LINK">Nome do link</a><img class="moldura" src="LINK DA SUA IMAGEM" />