Em meados de 2016 eu mostrei aqui no blog uma forma de inserir legendas personalizadas nas imagens dos posts do blog.
Relembre:
Como colocar legenda nas imagens do blog
Funciona? Sim.
Mas é trabalhoso que só.
Então hoje vou mostrar como fazer isso de modo mais simples, usando códigos CSS simples, personalizáveis e sem complicação.
O resultado será semelhante a esse, que inclusive eu uso aqui no blog:
Vamos aprender?
Fica tranquilo, é bem facinho!
Personalizar a legenda das imagens do blog - modo de fazer
Para começar, a dica de como inserir legenda em imagens dos posts:
Quando estiver escrevendo seu post e tiver inserido nele a imagem (ou as imagens) onde deseja colocar legenda faça assim: pare o mouse sobre a imagem que quer legendar e observe que aparece um menu de opções abaixo dela. Clique em Adicionar legenda.
Vai aparecer abaixo da imagem o texto Adicionar legenda.
Selecione-o e no lugar digite a legenda que deseja.
Se quiser colocar link pode, basta selecionar o texto e a seguir clicar em Link, no alto do editor de postagens.
Dica dada, vamos personalizar a legenda?
Comece copiando o código que vamos usar:
Vá ao painel de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e na barra de busca que aparecer digite }]]></b:skin> e tecle Enter para localizr.
Acima dessa tag de fechamento cole este código:
Observe que deixei marcado no código as áreas que são seguras editar.
Troque a cor de fundo, a fonte, o tamanho da fonte, a cor da fonte, etc...
Deixe como desejar e depois de pronto, salve.
Só isso!
O efeito vai aparecer em todas as imagens de seus posts onde tenha sido usado o recurso Legenda.
Legal, né?
Para facilitar ainda mais o entendimento gravei um vídeo bem rápido com a execução desse tutorial.
Aperte o play e tire todas as dúvidas:
Se restar alguma pergunta diga nos comentários do post e eu ajudo na medida do possível.
Gostou?
Então clique em Curtir ou compartilhe o post!
Eu fico muito grata!!!!
Oi flor, vou agora no meu blog tentar...
ResponderExcluirA Primeira Casa | Facebook
Achei lindo o efeito mas não achei no código do meu blog esse }]]>, somente ... como faço?
ResponderExcluirTenta procurando pelo código ]]>
ExcluirTambém não consegui :(
ResponderExcluir