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:
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">» 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!!!!
Oi Elaine!
ResponderExcluirLegal! É sempre um "plus" uma legenda na foto.
Beijos, Renata
palpitandoemtudo
Sim, e um blog é assim, feito de detalhes, né?
Excluirbeijosss
Gostei!!! Obrigada
ResponderExcluir:)
Excluirbeijossss
Elaine, quando eu dou Enter no codigo na barra não direciona mais o código no campo do HTML
ResponderExcluiraCHO que deu erro em alguma coisa, pois nao consigo achar mais um código. Me ajuda
Maria, eu não sei o que pode ser, sugiro que tente de novo, talvez usando outro navegador...
ExcluirÓtima dica, Elaine! Aqui se aprende muito!
ResponderExcluirBjs, bom dia! ❤️❤️
Que legal! Tentar com calme, vale!Gostei! bjs, obrigadão! chica
ResponderExcluirMuito legal, Elaine!
ResponderExcluirMuito obrigada por me ensinar tantas coisas bacanas. Graças a você meu blog está melhorando a cada dia.
Beijos
Oi Elaine,
ResponderExcluirObrigada 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!
Muito legal essa dica.
ResponderExcluirTentarei qualquer dia desses.
joturquezzamundial
Beijos.
Uau, sempre com novidades pra gente.
ResponderExcluirBjk
Obrigada pela dica! Depois vou tentar!
ResponderExcluirE quero te agradecer novamente pelo trabalho maravilhoso que vc fez lá no meu blog, ficou do jeitinho que eu queria!
Beijinhos.
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!!!
ResponderExcluirMeu Deus! Muiito obrigada! Eu tava precisando muito.
ResponderExcluirachei tão lindo, mais é uma pena... não apareceu no formato, apareceu como link abaixo da imagem :(
ResponderExcluirÉ sempre muito bom passar por aqui!!! saímos sempre com algo legal e super proveitoso
ResponderExcluirhttps://duplaedsilvaeotania.blogspot.com.br/