Como 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:

Oi! Eu sou uma legenda fofa!

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:

]]></b:skin>

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:

Conheça minha loja de templates!

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!!!!