Legenda nas imagens da postagem (Usando legenda padrão do blogger) [003]

Hey! Hey! Hoje vou ensinar como personalizar a legenda padrão que o blogger, que podemos ativar facilmente clicando em uma imagem e indo no ícone "Adicionar legenda", mas sejamos sinceros ela é muito feia rs. Então decidi fazer uma postagem que quase nunca vi por ai, como personalizar elas. Aqui no blog já ensinei duas formas de aplicar legendas nas imagens e personaliza-las, onde pode ver aqui [modo1], [modo2] porém ao utilizar um desses dois modos você é obrigado a aplicar em todos os seus futuros layout's, pois diferente da legenda padrão do blog que fica em baixo da imagem eles ficam desalinhados sem seus estilos.

1. Em alguma postagem, adicione uma imagem. Clique sobre ela, abaixo dela vai aparecer um menu de navegação com algumas opções "Pequena, Grande, Muito Grande e Legenda" selecione legenda. Abaixo da imagem vai abrir um pequeno espaço onde pode escrever livremente o que deseja, não aconselho texto grande se quiser usar a legenda sobre a imagem em vez de embaixo dela. 

2. Agora vá até o HTML do seu blog, ative a pesquisa ativando Ctrl+F, dentro da caixa de pesquisa cole ]]></b:skin>, e acima dele cole: 

Códigos

td.tr-caption {
font-size:12.5px !important; /* TAMANHO DA FONTE */
background-color: #000000; /* COR DE FUNDO DA LEGENDA */
display: inline;
color: #ffffff; /* COR DA FONTE DA LEGENDA */
font-family: Arial, sans-serif !important; /* TAMANHO DA FONTE */
padding: 10px;
margin-top: -75px; /* DISTÂNCIA EM RELAÇÃO AO TOPO DA IMAGEM */
float: left; /* POSICIONAMENTO DA LEGENDA, ALTERE PARA RIGHT SE DESEJAR */
position: relative;
margin-left: 10px;
margin-bottom: -20px; /* DISTÂNCIA EM RELAÇÃO À BASE DA IMAGEM*/
line-height: 120%;
text-transform:none;
letter-spacing: .025em;
}

td.tr-caption a:link, td.tr-caption a:visited {
color:#fff;
}
.tr-caption-container {
margin-left:8.5px;
}
.tr-caption-container img {
margin-bottom:10px;
} 

Um segundo modelo personalizado:

Códigos

.tr-caption {
opacity: 0.5;
background: #e6e0dc;
outline-offset: -2px;
outline: 1px solid #fff;
position: relative;
top: -25px;
padding: 2px;
font-family: silkscreen;
font-size: 8px!important;
color: #fff;
text-shadow: 1px 1px 0px #c7bdb7;
text-align: center;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.tr-caption:hover {
color: #fff;
background: #c486a8;
text-shadow: 1px 1px 1px #a85b83;
letter-spacing: 1px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Pronto! Agora é só personalizar como desejar. =)