Legenda nas imagens da postagem [001]

Oi, oi, oi! Bunnie's!!! Já faz bastante tempo que esse tutorial roda pela internet, é bem conhecido, inclusive uso na galeria de Layouts. Apesar disso não tive oportunidade de postar aqui no blog. Então decidi fazer hoje... Existe duas forma de fazer,  hoje vou ensinar uma um pouquinho mais pratica, e a outra vou postar na próxima semana. Certo? Então vamos lá. Créditos no final da postagem!

Postagem atualizada. Caso queira saber como fazer o segundo modo: acesse aqui.

.::Exemplo::.

Você pode personalizar a legenda colocando efeito em hover.

1. Vá no HTML do blog e pesquise por : ]]></b:skin, ao achar cole sobre ela o seguinte código:

Códigos

.legenda {
font-family: Trebuchet MS, sans-serif;
font-size: 11px;
color: #666666;
-webkit-filter: opacity(0.6);
-webkit-transition-duration: .90s;
background: #fff;
text-align: center;
position: absolute;
margin-top: 115px;
padding: 5px 2px 2px 2px;
width: 678px;
height: 14px;
}
.legenda:hover {
-webkit-filter: opacity(0.9);
-webkit-transition: All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Salve!

2. Vá em Postagens e escolha criar uma nova postagem. Faça upload (envio) de uma imagem normalmente, escolha o tamanho que quer a imagem. No canto esquerdo do blog possui opção "Escrever" e "HTML" clique no HTML. No último div abaixo da imagem cole:

Códigos

<div class="legenda">LEGENDA</div>

Escreva o que quer na legenda, e escolha a opção "Escrever". Prontinho! Agora é só editar o CSS ao seu gosto. Créditos Etc For Me. Qualquer dúvida é só comentar! XoXo.