Resumo de postagem automático com imagem sem javascript

06:09 in

Acredito que você já observou que a maioria dos blogs mostram somente um resumo da postagem na página inicial, e no final aparece escrito "Leia Mais", ou "Continue Lendo", e quando clicamos em “Leia mais” ou “Continue lendo” aparece a postagem completa.
Veja o exemplo abaixo:

Eu particularmente acho que dá uma estética melhor á pagina inicial, evitando que a pagina inicial fique extensa demais, o que causa, muitas vezes, um certo desconforto na busca dos conteúdos em certas páginas.

Características do Hack "Leia Mais"

- Sem javascript
- Carregamento rápido
- Amigável para motor de busca
- Bom para SEO
- Funciona em todos browser, incluindo Internet Explorer 6
Com estes recurso suas postagens serão resumidas automaticamente na sua página inicial. A cada postagem, irá aparecer um breve resumo do conteúdo da postagem.
Passo 1. Aplicar estilos CSS:
Entre no modo → 'editar html' do seu template (não precisa clicar em 'expandir modelo de widget') e procure pela tag:

]]></b:skin>

Passo 2. Cole esse código abaixo ANTES dessa tag:

.post-thumbnail{float:left;margin-right:20px} // Para imagem a esquerda

ou

.post-thumbnail{float:right;margin-left:20px} // Para imagem a direita

Passo 3. Clique em 'expandir modelos de widgets' e procure por:

<data:post.body/>

Passo 4. Substitua o código acima pelo código abaixo

1. Resumo de Postagem Automático com imagens na Página Inicial

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>

2. Resumo de Postagem Automático com imagens na Página Inicial para posts sem imagem

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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:else/>
<img class='post-thumbnail' alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' 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>

Qualquer duvida, deixe seu comentário.

Boa sorte!