14 de janeiro de 2017

Como escolher a imagem de destaque no resumo automático das postagens no Blogger

Essa é uma sacada muito boa pra você que quer chamar atenção do seu visitante para algum post e precisa usar uma imagem de destaque mas sem que ela fique no post.


Este recurso é muito utilizado no WordPress, onde tem uma função própria para isso. Mas não ficamos para trás nisso também não, sempre tem um jeitinho brasileiro :)

O macete é bem simples, mas é muito importante que o resumo automático das postagens já esteja instalado em seu blog. Portanto se você ainda não instalou, corre para este post rapidinho instala e volta aqui: Resumo automático das postagens com leia mais no Blogger

Com o resumo automático instalado no seu blog, vamos aprender o macete!

Usando CSS para ocultar a imagem na postagem

Sim, esse é o segredo! Vamos adicionar a tag img no HTML do post e vamos aplicar uma propriedade do CSS para esconde-la no post. Fazendo isso a imagem vai exibir somente nos resumos na página inicial e quando você compartilhar o post nas redes socias (se suas meta-tags estiverem corretas, se você tem dúvidas veja este artigo: Pacote de meta tags otimizado 2016).

Tudo que você precisa adicionar é:
<img src="ENDEREÇO-DA-IMAGEM" style="display:none;" />
O trecho ENDEREÇO-DA-IMAGEM você substitui para a url da imagem que você deseja dar destaque. Você pode hospedar a imagem no blogger mesmo, sobe ela e copia o endereço.

Onde aplicar o código

Bem simples! O código deve ser o primeiro elemento no HTML do seu post, veja no exemplo abaixo:

Fácil né? Uma dica que eu dou é usar sempre imagens quadradas para as thumbnail (imagem destacada). Assim a imagem vai ficar proporcional e agradável aos olhos ;)

Ah e antes de pensar em reclamar por ter que usar esse código, vale lembrar que este é o único jeito (até o momento) para fazer esse efeito. Até porque as vezes a sua imagem fica desproporcional no resumo, causando um ar amador no seu blog. Então vale a pena usar este macete :)

Dúvidas? deixe um comentário abaixo
5 estrelas - baseado em 6 votos

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

6 comentários

Amigo, estou com um problema: Quando compartilho um post do meu blog no Facebook, ele está puxando a imagem do autor e mão a da postagem. Voce sabe como resolver isso?

Blog: http://www.viralisme.com.br/

Obs: Clique no botão de compartilhar do facebook em algum post para ver o que esta acontecendo.

Aguardo a ajuda!

Olá Flavio,

Isso acontece porque o seu template não tem meta tags 100% otimizada para as redes sociais. Eu recomendo que você atualize as meta tags por desse post que fiz: http://www.codigosblogger.com/2017/01/meta-tags-seo-2017.html

Atualizando as meta tags como mostrado no post, certamente o problema será resolvido.

Abs

Na verdade quase todas estão em meu site... Você poderia me informar qual dessas meta tags resolveria meu problema? Assim eu adicionaria somente ela.

Obrigado pela atenção, aguardo resposta.

Flávio,

Eu analisei o blog e tem várias das meta tags faltando. Por favor eu recomendo que você tire todas as meta tags atuais e substitua pela do post indicado.

Abs

Não funcionou pra mim :(, a imagem simplesmente não aparece no resumo.

Oi Sthéfany, esse tutorial só vai funcionar se você usar um resumo automático dos posts no blog. Eu vi que o seu site ele não é resumido os posts na página inicial.

Recomendo fazer esse tutorial: http://www.codigosblogger.com/2016/05/resumo-automatico-das-postagens-com.html


Abrir lista de emoticonFechar lista de emoticon