Fazer Resumo da Postagem com Miniaturas das Imagens
Autor: Big Bizarros | Publicado: 2011-08-02T13:32:00-07:00

Que tal mostrar apenas os&nbsp;resumos das postagens no blog&nbsp;com uma&nbsp;miniatura da imagem&nbsp;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&nbsp;editar html, marque a opção para&nbsp;expandir modelos de widgets&nbsp;e procura por post.body, deve estar deste jeito no seu blog: &lt;data:post.body /&gt;

Então apague essa linha e coloque isso no lugar:
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;data:post.body/&gt;
&lt;b:else/&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'&gt;
&lt;data:post.body/&gt;
&lt;b:else/&gt;
&lt;b:if cond='data:post.hasJumpLink'&gt;
&lt;data:post.body/&gt;
&lt;b:else/&gt;
&lt;b:if cond='data:post.snippet'&gt;
&lt;b:if cond='data:post.thumbnailUrl'&gt;
&lt;div class='Image thumb'&gt;
&lt;img expr:src='data:post.thumbnailUrl'/&gt;
&lt;/div&gt;
&lt;/b:if&gt;
&lt;data:post.snippet/&gt;
&lt;div class='jump-link'&gt;
&lt;a expr:href='data:post.url + &amp;quot;#more&amp;quot;' expr:title='data:post.title'&gt;&lt;data:post.jumpText/&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;b:else/&gt;
&lt;data:post.body/&gt;
&lt;/b:if&gt;
&lt;/b:if&gt;
&lt;/b:if&gt;
&lt;/b:if&gt;
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:
&lt;b:if cond='data:post.hasJumpLink'&gt;
&lt;div class='jump-link'&gt;
&lt;a expr:href='data:post.url + &amp;quot;#more&amp;quot;' expr:title='data:post.title'&gt;&lt;data:post.jumpText/&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/b:if&gt;
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&nbsp;Sites úteis e interessantes.

Para&nbsp;melhorar o layout&nbsp;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 &lt;/b:skin&gt; (caso tenha duvidas veja aqui:&nbsp;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&nbsp;formatar texto&nbsp;ou&nbsp;colocar bordas. Veja como ficou depois de feitas essas alterações no layout.

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