Legenda personalizada nas imagens

Oi! Como estão? Eu estou ótima. Terminei de ler agora à pouco o último livro da trilogia A Seleção da Kiera Cass e meu Deus, livros incríveis e encantadores. Recomendo. Agora que acabei a leitura, vou ter mais tempo para responder e retribuir comentários, coisa que eu mal tenho feito nesses últimos tempos e vou tentar estar mais presente aqui, sim? Gente, estamos atualmente com 67 seguidores e eu fico feliz de tirar aquele "66" satânico do meu blog! Ai, é sempre tão complicado encher mil linhas com introdução... É por isso que minhas introduções não fazem sentido nenhum, mas mesmo assim, não estou afim de um novo nivelamento no blog. Indo ao assunto do post, uma leitora me fez um pedido de tutorial para colocar legendas personalizadas nas imagens e gente, eu fiquei algumas boas horas para fazer isso, já que eu nunca tinha feito ou usado algo assim e depois de muito trabalho, até que não ficou tão mal, viu? Foi o primeiro desafio de verdade daqui do blog e antes que perguntem, não, não estou pronta para o próximo rs. Let's go. ﾐ

☆ preview

No painel de controle do Blogger, clique em Tema e vá nas três bolinhas, escolhendo Editar HTML. Dê um clique dentro da área de código para localizar seu cursor, aperte Ctrl+F no teclado, pesquise por ]]></b:skin> e dê enter. Depois de ter encontrado, cole acima/antes disso o seguinte código:

@font-face {src: url('https://dl.dropboxusercontent.com/s/s1kintjn80swzol/wendy.ttf?dl=0'); 

font-family: wendy;

}

.imagem .legenda  {

-webkit-transition: all 1.2s ease-out;

-moz-transition: all 2.3s ease-out;

width: 500px; /* largura da legenda*/

height: 17px;

margin-top: -30px; /* ajuste */

margin-left: 1px; /* ajuste */

color: #444;

font-size: 11px;

font-family: wendy;

background: #fff;

opacity: 0.60;

text-align: center;

}

Alterem apenas as partes em negrito. A largura da legenda deve ser a mesma da imagem que usar. Eu tenho quase certeza de que vai ficar desalinhado, então você vai ter que ir ajustando até alinhar.  Quando forem ajustar "margin-left", não se esqueçam de que os números negativos vão pra esquerda e os positivos para a direita. Em "margin-top", números negativos sobem e negativos, descem.

Em seguida, cole o seguinte código na parte "Visualização em HTML" da área de postagem:

<div style="text-align: center;">

<div class="imagem">

<div style="text-align: center;">

<img src="LINK DA IMAGEM" height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM"></div>

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

</div>

<br></div>

Depois disso, é necessário hospedar sua imagem para gerar um link. O site que eu uso é o Imgur que é bem simples de usar, mas existem vários por aí. Cole o link, a altura e a largura da imagem em px e escreva sua legenda. Aí é só escrever a postagem normalmente e a legenda vai estar lá.

Espero que tenham gostado. Não esqueçam de dar os devidos créditos se usarem. É isso por hoje, fiquem bem, se cuidem.