Fazer Resumo da Postagem com Miniaturas das Imagens

Que tal mostrar apenas os resumos das postagens no blog com uma miniatura da imagemsomente 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:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

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

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

Spoiler:

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:

Spoiler:

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.

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>


.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 como ficou depois de feitas essas alterações no layout.