Legendas nas Imagens (Tutorial)

MDT #5: LEGENDA NAS IMAGENS DO BLOG

"Não importam seus defeitos, todos tem um também." - Ariana Grande.

 http://blog-part-of-me.blogspot.com.br/2013/06/mdt-5-legenda-nas-imagens-do-blog.html

Olá queridos leitores! Bom, essa é a última postagem da Maratona de Tutoriais do Blog. Deixei esse tutorial por último já que é totalmente exclusivo e criado por mim. Amanhã eu já irei postar o tão esperado Layout Free, ele já está pronto há algum tempo, mas queria deixá-lo para esse fim de semana, para fecharmos essa semana de férias com chave de ouro, concordam?

Bom, o tutorial é super fácil, você só precisa de um pouco de atenção para poder aplicá-lo em seu blog. Vamos lá?

No Painel do Blog - Clique no nome do seu Blog - Modelo - Editar HTML e pesquise por: ]]></b:skin>Quando achar, cole o código abaixo antes desse, fazendo as devidas alterações: 

.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;
}

Depois de aplicar o código de personalização da legenda, você precisa aplicá-lo nas imagens do Blog, para isso, na área onde escrevemos o conteúdo das postagens, mude para a aba HTML (lado superior esquerdo), e cole o código abaixo, fazendo as devidas Alterações:

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

Caso o código dê erro, acrescente outra </div> no final dele, certo? Se usá-lo uma vez terá que aplicá-lo em todos os Layouts do Blog, mesmo que não vá aplica-lo mas em futuras imagens, para que não dê erro nas que você já tinha aplicado, entende?

Espero que tenham gostado, repito: Esse tutorial é EXCLUSIVO, foi criado por mim, então por favor, se usarem deem os créditos, ok? Bom, por hoje é só mesmo, aguardem o Layout Free amanhã! Até mais õ/