Fazer Resumo da Postagem com Miniaturas das Imagens

Que tal mostrar apenas os resumos das postagens no blog com uma miniatura da imagem somente alterando algumas linhas de html no seu blogger e sem usar nenhum código javascript. Isso é muito bom e certamente é bem mais fácil de fazer que as versões anteriores para fazer resumo das postagens:

Postagem expansível com miniatura da imagem
Mostrar resumo da postagem

O procedimento é bem simples, você entra na pagina editar html, marque a opção para expandir modelos de widgets e procura por post.body (use o ctrl F para pesquisar), deve estar deste jeito no seu blog: <data:post.body />

Então apague essa linha e coloque isso no lugar:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Cuidado para não mostrar duas vezes a mesma coisa no seu blog! Veja se logo após esse trecho se tem o código:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Se encontrar apague, pois isso fará que o link para ler a postagem completa apareça duas vezes como na imagem abaixo, mas se retirar esse código não terá problemas.


E já está pronto, agora é só visualizar seu blog e verá que na pagina inicial ou paginas dos marcadores do blog aparecem um trecho do seu texto e uma miniatura das imagens.


Essas imagens foram feitas durante nossos testes em nosso outro blog Sites úteis e interessantes.

Para melhorar o layout podemos adicionar algumas linhas de código CSS e deixar a miniatura da imagem ao lado do texto, volte na pagina editar HTML e coloque esse trecho antes de linha </b:skin> (caso tenha duvidas veja aqui: Onde colocar os códigos no blog):

.thumb img {float: left;margin: 5px;}

A parte float:left é o lado que a imagem ficará caso queira do lado direito então use float: right

E se quiser personalizar o link leia mais, adicione essas linhas no mesmo local que colocou o outro código CSS:
.jump-link {text-align: center;margin:auto}
.jump-link a{font-size:16pt;color:#f00}
.jump-link a:hover{color:#00f}

Veja aqui como formatar texto ou colocar bordas. Veja como ficou depois de feitas essas alterações no layout.

Encontramos e fizemos algumas modificações no tutorial publicado no site Blogger Buster, o nome original é Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!