Legenda nas imagens da postagem [002]

Olá meus bunnie's, lembram que prometi trazer um segundo modo de por legenda nas imagens das postagens? Na verdade elas não são exatamente diferente, o outro modo só possuía menos códigos, mas apesar de ser mais pratico sempre gostei desse segundo modo. Esse também é bem simples e fácil de aplicar. Deixarei os créditos no final da postagem

.Se quiser saber como é o primeiro modo: acesse aqui.

.::Exemplo::.

Você pode personalizar a legenda colocando efeito em hover.

1. Navege até o HTML do seu blog e procure por ]]></b:skin>, acima dele cole: 

Códigos

.imagem  {
margin-top:0px; /* margem do topo */
}
.imagem img  {
align:center; /* alinhamento */
margin-top:0px; /*margem do topo */
}
.imagem .legenda  {
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 2.5s ease-out;
width:500px; /* largura da área da legenda */
height:20px; /* altura da área da legenda, não precisa mexer */
margin-top:-23px; /* margem do topo, mexa se precisar */
margin-left: 13px; /* margem da esquerda, mexa se precisar */
color:#COR; /* cor da letra */
background: #COR; /* cor do fundo */
opacity: 0.60; /* não mexa */
text-align: center;
}
.imagem:hover .legenda  {
background: #COR; /* cor do fundo hover */
opacity: 0.99; /* não mexa */
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 2.5s ease-out;
}

Salve!

2. Vá até a área das postagens. Abra uma nova postagem e faça o upload (envio) da imagem normalmente. Dentro da postagem cole:

Códigos

<div class="imagem">
<div style="text-align: center;">
<img src="URLDAIMAGEM" /></div>
<div class="legenda">FRASE</div></div>

Agora selecione a imagem que enviou, sobre ela clique no segundo botão do mouse e escolha a opção"Copiar endereço da imagem..." Agora onde esta marcado em vermelho substitua pelo link da imagem que copiou. Onde está marcado em azul coloque uma frase de sua preferencia, Salve e veja o resultado, Não se esqueça de voltar ao HTML para personalizar ao seu gosto. Dúvidas? Deixe um comentário. Créditos vão para Part Of Me.

OBS: Se ao postar entrar um aviso dê erro, acrescente outra </div> no final dele, tudo bem? Se usá-lo uma vez terá que aplicá-lo em todos os layouts que usar futuramente, mesmo que não vá aplica-lo mas em futuras imagens, para que não dê erro nas que você já tinha aplicado.