Durante a minha busca por algum tutorial que ensinasse a criar a imagem de destaque para cada post automaticamente, eu encontrei esse guia do site: Eles dividem o código em duas partes, uma em Javascript e a outra em HTML
Primeiro vem o Javascript
JAVASCRIPT
Você vê aquela parte no início que diz "Largura da Imagem", "Altura da Imagem", "Comprimento do texto de resumo se não houver imagem" e "Comprimento do resumo se houver imagem? Esses são os 4 valores que você pode alterar. Os números de largura e altura são a largura e a altura da imagem em destaque. Nem todas as postagens têm uma imagem e os dois segundos números permitem que você especifique a quantidade de texto que deseja exibir. Você pode brincar com esses números para ver o que funciona melhor para você.
Depois que o seu JavaScript estiver pronto, vá para Blogger> Modelo> Editar HTML e procure pela tag:
</head>
e cole o seu código antes da tag.
HTML
Este é o HTML que você precisa para criar para o resumo:Aqui é onde as coisas podem ficar complicadas porque os modelos do Blogger podem ser muito diferentes. No entanto, todos os modelos do Blogger terão esse código em algum lugar:
<data:post.body/>
Este código é como todo o conteúdo da sua mensagem é exibido! A maioria dos modelos terá três dessas tags post.body. A primeira é para o modelo mobile. Os segundos dois são para o modelo desktop. Você NÃO deseja substituir a etiqueta de modelo de modelo mobile. Então o que você precisa fazer é começar no início do seu modelo e procurar por essa tag acima. Depois de encontrar o segundo e terceiro, você precisará excluir os dois e substituí-los com o código HTML do código acima.
Remover o "Ler Mais" extra
O código acima inclui um link de "ler mais" para que você não precise inserir um quando você escrever posts. No entanto, se você estiver colocando um link de salto antes de usar este código, provavelmente você estará vendo dois links "ler mais" agora. Tudo que você precisa fazer é rolar para baixo um pouco de onde você colou o código acima e encontrar isso:
<div class='post-footer'>
Logo acima, você deve ver isso:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Basta excluir e pronto.
Miniaturas personalizadas
Procurando uma maneira de exibir imagens não na sua postagem? Você pôde ter observado se você olhar em nossa Home Page que a maioria das imagens do thumbnail não está realmente nos posts. Isso é muito fácil de realizar com o WordPress, mas o Blogger não tem uma caixa específica para definir uma imagem em destaque. Há um truque para isso! O que você teria que fazer é colocar a imagem que você quer como uma miniatura no topo de sua postagem. Em seguida, mude para a sua guia html e adicione isso dentro de sua tag de imagem:
Style = "display: none;"
Aqui está um exemplo:
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-aQ2JJ_LXAqo68h26ffeRZS6L4UaRJsSq8qg3qyaJ7HTooaIHDcLNlTu6H4PX2uCx0tR4iTYJx4U0-GNi0m2rGyvs5vVChiosso-VYjJzIP9_1DrskQXFfT4EoQl4iNQw2Wr2kBZuHDk/s1600/button2.jpg" style="display:none;" />
Isso vai fazer com que ela apareça como uma miniatura, mas não dentro no post. Por exemplo a miniatura desse post que aparece na homepage, não está visivel aqui dentro do post.
Adaptando isso para o meu blog
O tutorial acima funciona? Sim, mas sem alguns ajustes meus posts ficaram assim:
E quero que a imagem ocupe toda a área (largura de 100%) e tenha a altura automática seguindo a proporção da imagem e o resumo fique justificado.
O script funciona usando os valores das linhas 2 e 3 do javascript para determinar a quantidade de pixels que a imagem deve ter. Eu quero que ela tenha a largura de 100%, então vou mudar o valor da largura para 100 e editar a linha 31 disso:
imgtag = '<span style="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';
para isso:
imgtag = '<span style="overflow:hidden; border: none; margin:0 0 10px 0; float:left; width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'%" height="auto"/></span>';
Primeiro eu removi o max-height:'+img_thumb_height+'px; para que a area da imagem não tivesse mais um limite de altura, removi os 15px da margem esquerda e logo após o '+img_thumb_width+' eu troque o px por %, assim o valor 100 da linha 2 passaria a corresponder a 100% e não 100px.
Quase lá.
O texto do resumo fica dentro da div que esta na linha 34
var summary = imgtag + '<div >' + removeHtmlTag(div.innerHTML,summ) + '</div>';
Para isso foi preciso apenas inserir o codigo style="text-align: justify;" dentro da div.
var summary = imgtag + '<div
style="text-align: justify;">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
Tudo pronto, o resultado você pode ver na nossa homepage
Importante!
Apesar desse script criar o botão de "ler mais" ele não funciona da mesma forma que o do blogger 
, então se os seus posts tiverem muito conteúdo, você pode acabar sendo vítima da auto-paginação. Para evitar isso sempre depois da imagem e do texto do resumo coloque a quebra do blogger.
, então se os seus posts tiverem muito conteúdo, você pode acabar sendo vítima da auto-paginação. Para evitar isso sempre depois da imagem e do texto do resumo coloque a quebra do blogger.
