Como colocar um plano de fundo nas imagens inseridas no Blogger

Sempre quis colocar um fundo nas imagens aqui do blog e isso tornou-se possível a partir do momento em que o Blogger introduziu as legendas (captions) nas imagens. Ao clicar em adicionar legenda (add caption), cria-se no código da imagem um atributo class (classe) denominado de "tr-caption-container" conforme pode ver abaixo:

Add caption

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLnhOboLGJP0lC7jMKDXqvJhvtQxyKgzzpbpuIIMlq2SK8bMBR0bFI7YfRLSY2Jx90X6fHqAhyJiwJWTK8nJersuJsOr_3tmJXnsbpRkVY8QugMfZ2-uASwAxl9dPTY5YsDRxBig/s1600/S3700149.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLnhOboLGJP0lC7jMKDXqvJhvtQxyKgzzpbpuIIMlq2SK8bMBR0bFI7YfRLSY2Jx90X6fHqAhyJiwJWTK8nJersuJsOr_3tmJXnsbpRkVY8QugMfZ2-uASwAxl9dPTY5YsDRxBig/s320/S3700149.JPG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Add caption</td></tr>
</tbody></table>

Portanto, pode-se criar alguns estilos com essa class. Eis como estilizei as imagens aqui no blog, aplicando um CSS bem simples colocado antes de ]]></b:skin> no template:

.tr-caption-container {
background: #eee; 
border: 1px solid #CCC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-goog-ms-border-radius: 10px;
border-radius: 10px;
}

- background: Coloca-se aqui a cor de fundo, no meu caso cinza bem claro(#eee), se quiser outra cor, procure pelo seu código correspondente.
- border: Coloquei uma borda fina (1px), linha sólida e uma cor para realçar (#ccc), um cinza mais escuro. Você pode alterar ao seu gosto.
- border-radius: um atributo do CSS3 para arredondar as bordas. Para que fique compatível com outros navegadores, adicionei também o -moz-border-radius(Firefox), -webkit-border-radius(para navegadores baseados em webkit) e -goog-ms-border-radius (Chrome). Infelimente as bordas arredondadas NÃO funcionam no Internet Explorer, mas quem liga?
Usei um arredondamento da ordem de 10px, você pode tentar outros valores que mais te agrada. Se não quiser bordas arredondadas, é só apagar esses atributos.

Para adicionar esse e qualquer outro CSS no código dos templates antigos, é só ir em painel de controle >> Design >> Editar HTML, procurar (control + F) por ]]></b:skin>, colocar o código CSS acima desta e salvar.
Caso o template seja do Designer de Modelo, vá na aba Avançado (Advanced), role o cursor até adicionar CSS (add CSS), cole o código e clique em Aplicar no Blog (Apply to blog):

Designer de Modelo

Um expert em CSS poderia fazer algo mais interessante, outras estilizações melhores. O que fiz aqui é apenas algo bem simples que qualquer um pode fazer, sem muitas dificuldades.

That's all folks!!!