Como escolher a imagem de miniatura (Thumbnail) no resumo automático de postagens?

9 de abril de 2014

24 comentários:
Essa é uma dica bem interessante e rápida, que eu descobri a algum tempo, e a partir daí, venho usando com frequência, em praticamente todas as postagens do meu blog. A dica baseia-se em escolher qual imagem deve aparecer no resumo da página inicial do blog, não aparecendo dentro da postagem.


O resumo automático de postagens é configurado para inserir a primeira imagem  encontrada na postagem, e por isso muitas vezes devemos usar uma pequena miniatura no conteúdo da postagem, para que ela apareça na página inicial do blog. Eu mesmo acho isso bem chato, pois prefiro iniciar a postagem com uma estrutura limpa, apenas com as linhas de texto.

Se você ainda não configurou o resumo automático em seu blog, siga este artigo: Resumo automático de postagens "Leia mais" no Blogger.

Usando display:none para ocultar a imagem na postagem

Esse é o procedimento: usar um seletor CSS no style da imagem que for inserida no inicio do post, este por sua vez, fará com que a imagem não apareça dentro do post, mas não impedindo que seja puxada pelo resumo de postagens, que desconsidera o style aplicado a ela.

O código:
<img src="url_da_imagem" style="display:none;"/>
 O trecho a se substituir é: url_da_imagem - que refere-se ao url da imagem que você deseja ver como miniatura da postagem. Você pode hospedar a imagem de diversos servidores, mas como usamos o Blogger, convém usar o Picasa Web, que é vinculado ao serviço.

Aonde usar o código?

O uso é simples, e deve ser o primeiro elemento do código HTML da postagem. Nesta postagem que agora crio, veja como eu aplicaria o código:


Simples! Algo interessante a ressaltar é que a imagem da miniatura deve ser uma imagem quadrada (ou pelo menos nos resumos que estão configurados proporcionalmente, com mesma altura e largura), para que se ajuste corretamente a página inicial, e não fique destorcida.

Muitos podem reclamar por não ser prático, mas acho bem interessante esta possibilidade de escolha da imagem que deseja ver como miniatura, podendo após isto, criar sua postagem livremente, sem se preocupar com problemas de imagens desproporcionais, por exemplo.

24 comentários:

  1. E ae cara, blz?

    Uma dica simples mas muito importante para usuários do Blogger que não querem a imagem do thumbnail aparecendo no post. Bacana!

    Até véi!

    ResponderExcluir
    Respostas
    1. Olá Rodrigo,

      Isso mesmo, é essa a ideia da dica! Obrigado por deixar seu comentário :D

      Abraços.

      Excluir
  2. Muito curiosa esta dica, nunca tinha pensado em algo semelhante!

    Mas e no Facebook? Já experimentou partilhar um artigo com essa dica para ver se essa imagem "oculta" aparece como opção para acompanhar a partilha?

    ResponderExcluir
    Respostas
    1. Olá Dav,

      No facebook eu nunca tentei, para ser sincero.

      Mas como eu uso o compartilhamento automático de postagens (do Blogger ao Google +), noto que todas as postagens que são criadas e tem esse código inserido no início do artigo tem a miniatura puxada pelo sistema de compartilhamento do G+. Pode notar isso nos compartilhamentos deste meu perfil agora usado.

      Obrigado pelo comentário :D

      Abraços!

      Excluir
    2. eu já experimentei e fica muito bom, aparece a imagem como opção para ser anexada à publicação! Já estou a utilizar esta dica, obrigado :)

      Excluir
  3. Respostas
    1. Olá Michael,

      Qual problema ocorreu?

      Abraços!

      Excluir
  4. mais ocupa um espação do post la emcima hein?? tem como criar um que n ocupe espaço?

    ResponderExcluir
    Respostas
    1. Não sou autora do post, mas utilizo uma técnica parecida há tempos. O que faço é definir a altura e a largura da imagem como 0, assim ela não fica visível. Parecido com o ensinado aqui (o do post é mais prático, inclusive). Mas eu não coloco como primeira coisa no HTML para evitar esse espaço. Faço assim:

      Escrevo o meu primeiro parágrafo e no fim dele coloco o código da imagem oculta. O que deve ser seguido é: a imagem oculta tem que ser a primeira que vai aparecer no texto. Agora, se vc for começar com uma imagem.... desconheço uma forma de usar a miniatura oculta sem o espaço.

      Excluir
  5. Estou tentando melhorar a qualidade dos thumbnails que aparecem na minha página inicial.
    O link que o meu sistema está pegando é o com termino /default.jpg e não consigo achar em lugar algum do meu código fonte um lugar que faça referência a isso.

    Da uma olhada: ridetudo.com
    Conto com a sua ajuda, obrigado.

    ResponderExcluir
  6. Pra quem está tendo problema, já que o dono do blog abandonou, irei ensinar como resolve. Você só precisa deixar o código HTML junto com text, imagem ou código de vídeo, um exemplo:

    img src="url_da_imagem" style="display:none;"/>AQUI ESTÁ O TEXTO GRUDADO COM O CÓDIGO DA IMAGEM, ASSIM NÃO FICARA APARECENDO O ESPAÇO.

    img src="url_da_imagem" style="display:none;"/>
    SE POR ASSIM IRÁ APARECER O ESPAÇO.

    Já que no blogger cada enter automaticamente da um e acaba criando espaço, então é só deixar grudado o código com texto.

    ResponderExcluir
    Respostas
    1. Não é questão de abandonar, é questão de não ter tempo para responder todos os comentários, como são muitos. Mas fico feliz que tenha resolvido seu problema :)

      Excluir
  7. Abraao, meu amigo.. Queria saber se tem como fazer o inverso, pois no meu blog a imagem que aparece como miniatura na página inicial é sempre a primeira.

    Entretanto, eu coloco sempre como primeira imagem um curso que estou como afiliado... E isso está deixando minha página muito suja, dá uma conferida:

    http://nfranquiasbaratas.com

    ResponderExcluir
  8. No meu blog, nas postagens em coloco vídeos do YT, aparece o vídeo como miniatura na página inicial, mesmo que eu tenha colocado uma imagem no topo do texto. Fica feio. Como faz pra driblar isso? Quero que apareça somente fotos mesmo.

    ResponderExcluir
    Respostas
    1. Faz assim: no código do vídeo retire o https:

      Exemplo:
      < iframe allowfullscreen="" frameborder="0" height=" 408 " src=" https//www.youtube.com/embed/hAbjo8Ea_Yo " width=" 725 " > < * /iframe >

      Fica assim:
      < iframe allowfullscreen= "" frameborder= " 0 " height= " 408 " src=" //www.youtube.com/embed/hAbjo8Ea_Yo " width=" 725 " > < / iframe >

      O vídeo funciona normalmente no post e a miniatura dele não aparece.

      Excluir
  9. No meu aparece o vídeo envés da imagem como corrigir isto ?

    ResponderExcluir
    Respostas
    1. Conseguiu resolver.. estou com o mesmo problema!

      Excluir
  10. Parabéns Henrique, seu post me ajudou muito!

    ResponderExcluir
  11. Caro, a dica é ótima! E eu findei descobrindo um jeito de deixá-la no automático, pra não ficar copiando e colando o código toda vez que for postar algo. A dica é a seguinte. Ir em: CONFIGURAÇÕES (do blogger)>> POSTAGENS E COMENTÁRIOS >> MODELO DE POSTAGEM , e copiar o código dentro, pra ficar como modelo de postagem. Estará resolvido o problema.

    OBS. Se caso o blog der erro na aceitação do código, é só entrar no html de uma nova postagem, e copiar o primeiro código que aparece, e colocar na frente do código que vc indica. Por fim, é só fechar a tag com < / div >

    O problema estará completamente resolvido. Tudo o que for postado será visto no facebook com uma thumbnail personalizada.

    ResponderExcluir
  12. Nossa resolveu meus problemas, agora não tenho que colocar duas imagen e sim só uma. Muito obrigada♥

    ResponderExcluir