Como colocar legenda nas imagens do blog

em 27 de junho de 2016

colocar legenda nas imagens do blog

Um blog atrativo é, antes de tudo, um blog com posts bem escritos, que tenha algo a oferecer ao leitor. Seja esse "algo" uma receita, uma informação, um tutorial, uma reflexão, uma conversa, etc...
Mas também torna o blog atrativo alguns detalhezinhos que o fazem ser charmoso e gostoso de descobrir e navegar.
Concorda comigo?

Antes da gente começar o tutorial de hoje observe a imagem abaixo:



Notou a legenda?
E não, ela não foi inserida com a imagem, ela foi inserida sobre a imagem.
É um texto mesmo, e não algo colocado em editor de imagem.
A imagem original é essa aqui, sem legenda, percebe?
Legal, né?

Pois é isso que vamos aprender: como colocar legenda em imagens do blog.
Esse é um recurso que a gente vê em blogs Wordpress mas que com um pouco de esforço e atenção dá pra ter no Blogger.
Quer aprender comofaz?
Bora comigo!


Como colocar legenda em imagens do blog


Para começar vamos inserir o estilo da legenda no código-fonte de seu blog.
Não se preocupe, é bem fácil e tranquilo.
Acesse a aba Modelo de seu blog e dentro da caixa de código tecle Ctrl+F.
Na barrinha de pesquisa que surgir  cole isso:



Tecle Enter para localizar e imediatamente acima disso cole o Código CSS:

Copiar os códigos


Esse código define a aparência de sua legenda, coisas como cor de fundo, altura, largura, cor e tipo de fonte, etc.
Esses campos podem e devem ser alterados caso você deseje, para que combinem com seu design do blog. Deixei marcado tudo que pode ser alterado.
Após alterar como desejar, salve.

Agora preste atenção!
Não vai aparecer legenda nenhuma em seu blog ainda.
Para que a legenda apareça nas imagens que você determinar precisa inserir esse código aqui (está na página de códigos, é o Código HTML):

<div class="imgteaser">
  <a href="AQUI VOCÊ COLOCA O LINK SE DESEJAR">
    <img src="URL DA IMAGEM" />
    <span class="more">&raquo; AQUI VOCÊ COLOCA O TEXTO DA LEGENDA</span>
  </a>
</div>


Vamos entender o código?
Onde marquei em azul é o link. Pode ser o link do post, de algum marcador, ou simplesmente o link do blog. Como qualquer link sempre começa com http, certo?

Onde marquei em verde é a url da imagem, o endereço web da imagem.
Para ter esse endereço carregue a imagem que deseja usar em um post de rascunho.
Daí deixe a imagem no tamanho que desejar (eu recomendo Tamanho original para imagens já editadas no tamanho correto ou Tamanho muito grande caso suas imagens não sejam otimizadas) e a seguir clique sobre essa imagem com o botão direito do mouse. Copie o Endereço do link (se estiver no Chrome).
Este é o endereço web de sua imagem.

Onde marquei em pink é onde você coloca a legenda de sua imagem.
Pode escrever o que desejar, mas lembre: é legenda e não texto grandão!

Veja um exemplo de imagem com legenda e link nessa legenda:




Testando a legenda da imagem


Agora vá ao seu blog e comece uma postagem.
Escreva o que desejar e depois de terminar clique em HTML, que aparece no alto do editor de postagens.
Essa ação vai colocar seu texto em modo HTML.
Cole então o Código HTML da imagem onde deseja que a imagem apareça.
Faça as alterações: url da imagem, link para onde deve direcionar e legenda.
Clique para visualizar a postagem.
A legenda já aparecerá.
Daí é só publicar a postagem como está acostumado.

Importante:
Sempre que desejar colocar a legenda personalizada em suas imagens precisa colocar o Código HTML, ok?
É isso que garante que a legenda apareça.
Em imagens que não tenham sido inseridas com esse código a legenda personalizada não aparecerá.
Isso é bom pois permite destacar alguma imagem, dá total controle sobre onde e quando a legenda personalizada será usada.

Créditos do hack: Vagabundia

Gostou?
Então compartilhe com os amigos!!!!


Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

15 comentários , comente também!

  1. Oi Elaine!

    Legal! É sempre um "plus" uma legenda na foto.


    Beijos, Renata
    palpitandoemtudo

    ResponderExcluir
    Respostas
    1. Sim, e um blog é assim, feito de detalhes, né?
      beijosss

      Excluir
  2. Elaine, quando eu dou Enter no codigo na barra não direciona mais o código no campo do HTML
    aCHO que deu erro em alguma coisa, pois nao consigo achar mais um código. Me ajuda

    ResponderExcluir
    Respostas
    1. Maria, eu não sei o que pode ser, sugiro que tente de novo, talvez usando outro navegador...

      Excluir
  3. Ótima dica, Elaine! Aqui se aprende muito!
    Bjs, bom dia! ❤️❤️

    ResponderExcluir
  4. Que legal! Tentar com calme, vale!Gostei! bjs, obrigadão! chica

    ResponderExcluir
  5. Muito legal, Elaine!
    Muito obrigada por me ensinar tantas coisas bacanas. Graças a você meu blog está melhorando a cada dia.
    Beijos

    ResponderExcluir
  6. Oi Elaine,
    Obrigada pela ajuda, agora referente a imagem com o notebook e o layout do seu blog nele, como você fez?
    Posta pra gente essa dica \o/
    Beijossss!

    ResponderExcluir
  7. Muito legal essa dica.
    Tentarei qualquer dia desses.
    joturquezzamundial
    Beijos.

    ResponderExcluir
  8. Uau, sempre com novidades pra gente.
    Bjk

    ResponderExcluir
  9. Obrigada pela dica! Depois vou tentar!
    E quero te agradecer novamente pelo trabalho maravilhoso que vc fez lá no meu blog, ficou do jeitinho que eu queria!
    Beijinhos.

    ResponderExcluir
  10. Elaine você caiu do céu! Como tem me ajudado nesses meus oito meses de blog. Admiro demais o seu trabalho, meus parabéns e obrigada por tudo que tem me ensinado!!!

    ResponderExcluir
  11. Meu Deus! Muiito obrigada! Eu tava precisando muito.

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…