Thumbnail + Resumo Automático

Extraído de:
http://helplogger.blogspot.com.br/2012/03/auto-read-more-with-thumbnail-for.html

This blog and its content is for personal use only.

Este hack serve para mostra apenas um thumbnail e um resumo dos post na Homepage, Arquivos, Páginas de Tags, Resultados de Pesquisas. Automaticamente incluindo "Leia Mais" fazendo alterações com script no template. 

Passo 1

Há 2 opções: 

A. Automático "Leia Mais" para TODOS os posts:

A-1. Localize o código (há 3, substitua o segundo):
<data:post.body/>

A-2. SUBSTITUA por:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

B. "Leia Mais" apenas para posts ANTIGOS (o último post aparecerá normal, então caso queira inserir o "leia mais", deverá inserir a "quebra de página" no momento de confecção da postagem. Neste caso, aparecerá 2x "Leia Mais" na página inicial, um pouco irritante, mas não consegui tirar. Lembrar de tirar a "quebra de página" quando for feito outro post. Caso contrário a duplicidade de "Leia Mais" continuará):

B-1. SUBSTITUA o código <data:post.body/> por:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <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>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Passo 2:

A. Para o thumbnail ficar à esquerda:

A-1. ACIMA de:
]]></b:skin>

A-2. Coloque o código: 

.post-thumbnail{float:left;margin-right:20px}

B. Para o thumbnail ficar à direita:

Acima de  ]]></b:skin> adicione:

.post-thumbnail{float:right;margin-left:20px}