Tutorial - Legenda na imagem do post

Escreva aqui o que quiser! ❤

Recebi uma ask, pedindo um tutorial de como colocar legenda nas imagens das postagens. Eu realmente nunca tinha visto esse tuto, apesar de já ter visto aplicado em um blog. Fiquei um baita tempo no google, testei alguns tutoriais, nenhum tinha dado certo. Alguns ficavam deformados, sei lá, estavam com algum erro. Mas depois de tentar e tal, consegui resolver. O resultado, como podem ver, é o da imagem acima. Achei que ficou lindo! Vamos aprender?



Vá no seu HTML e procure por:
]]></b:skin>

Após achar a tag, cole acima, o seguinte código:

.legenda {
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #000;
opacity: .7;
background-color: #fff;
position:absolute;
margin-top: -60px;
margin-left: 90px;
padding: 9px;
}

Agora vamos aplicar a legenda na imagem.

Insira sua imagem na postagem, normalmente.
Vá no HTML da postagem, e após o link da imagem, cole o seguinte código:
<div class="legenda">Sua legenda aqui</div>
Coloque a legenda que quiser e continue a escrever sua postagem normalmente.

Bom, é isso. É super fácil não é mesmo? Se tiverem alguma dúvida, basta comentar que eu ajudo!

Espero que tenham gostado.
Beijos

14 comentários:

  1. Sempre quis saberrr! Já tinha visto no AEG, é muito prático, eu adoro. Já irei usar o tuto no próximo layout. ;3

    ResponderExcluir
  2. Legal o tuto, e até simples. ^-^ Mas eu raramente uso a legenda, portanto, não vou usar por enquanto.
    Bjos...

    - SammySacional -
    - Dando Uma de Escritora -

    ResponderExcluir
  3. Amei esse tutorial , sério, agora vou sempre colocar legenda nas fotos !

    Cliquesnocapricho.blogspot.com

    ResponderExcluir
  4. Ahhhhh, super amei! Fica muuuito legal, e esse tuto é super original :D
    Beijos,
    Sim Senhorita (Clique no perfil)

    ResponderExcluir
  5. Ameiiii muito legal *--*

    1ahistoria.blogspot.com.br

    ResponderExcluir
  6. Ah, eu tava querendo esse tutoriaal e é tão simples, vou usar no blog imediatamente.
    http://garotadilemablog.blogspot.com.br/

    ResponderExcluir
  7. Nossa, achei incrível o resultado! Pode ter certeza que já irei testar, hahah.

    Um beijo, Anna.
    http://www.world-cutest.blogspot.com.br/

    ResponderExcluir
  8. Fica bem legal!
    PS:Ingrid fiz ribbons no estilo do do layout base ok?Irei postar e te creditar

    http://candyy-world.blogspot.com/

    ResponderExcluir
  9. Incrível , sempre quis fazer esse tutorial, mas nunca acertava. *-*
    Vou testar aqui e usar.
    Beso ;*
    republicacrash.blogspot.com.br/

    ResponderExcluir
  10. Maneiro! estava procurando esse tutorial *o*
    Cantiinho da bia, Bjs

    ResponderExcluir
  11. Vou fazê-lo!Amore eu acho que os gagdtes do cabeçalho tão desconfigurados...Estão em baixo na área dos posts...Seu blog é lindo flor :]
    Bias--world.blogspot.com

    ResponderExcluir
  12. Amei esse tutorial, sério!!
    Ele é bem diferente e muito fofo!!

    http://thesixminutes.blogspot.com.br

    ResponderExcluir
  13. Matou minha curiosidade, acho que fica super lindo. Vou tentar fazer, espero conseguir já que não sou muito boa pra mexer em html, quando envolve efeitos, fotos e etc. Beijinhos e fique com Deus (:

    http://toutrever.blogspot.com.br

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +