Como mostrar posts resumidos na capa do Blogger

Neste blog eu não instalei nenhum rack para resumir e expandir os posts das páginas principais do blogger. Acontece que este template já veio com um hack instalado, funciona bem, mas a meu ver existe uma opção melhor.

O hack deste blog resume os posts na capa e exibe o link “Leia Mais...”, que direciona para a página do post completo com as opções padrões (Postagem mais recente, Início, Pstagens mais antigas). Vou mostrar uma alternativa que acho mais eficiente.

O hack abaixo também exibe os posts resumidos na capa com o link “Leia Mais...” (ou o nome que você quiser dar), mas este link apenas expande todo o conteúdo do post na capa, ou seja, não troca de página. Ele exibe ainda no final do post um link com o nome “Resumir...”, por exemplo, para exibir novamente apenas o resumo. Funciona como neste exemplo.

Como implantar o hack:

Será que preciso repetir, que antes de qualquer alteração no seu template você deve sempre salvar o modelo e que qualquer alteração feita é por sua conta é risco? Acho que não...
1 - Adicione o código abaixo logo acima do tag </head> do seu template.

<script type='text/javascript'
src='http://www.javascripthost.com/s1/bin/pc286resume.js' />

Observação: Se você quiser pode baixar o java script http://www.javascripthost.com/s1/bin/pc286resume.js, abrir, examinar e hospedar em um servidor como o próprio JavaScript Host com o nome que desejar. Leia mais aqui sobre o JavaScript Host.

2 - Salve seu template e selecione expandir modelos de widget. Agora você vai substituir todo o conteúdo entre as linhas (inclusive):

<b:includable id='post' var='post'>
e
<div style='clear: both;'/> <!-- clear for photos floats -->

Por este código:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a> <b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'> <p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style> <p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Leia Mais...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Resumo...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->

Salve o template.

Observação: Você pode substituir "Leia mais... e Resumo..." por "Exibir tudo... e Exibir resumo...), por exemplo.

3 - Agora quando editar suas postagens basta incluir no final do resumo do post (antes da parte que deseja que fique oculta) a tag: <span id="fullpost"> e no final do post a tag </span>

Se preferir pode salvar um modelo de template: nas configurações do seu blog > em formatação > e em Modelo de postagem cole o seguinte código (cuide para que ele fique neste mesmo formato).

Digite seu resumo aqui
<span id="fullpost">
Digite o resto do post aqui
</span>

Observação: Se você desejar que um post não seja resumido, basta não inserir as tags ou, se você criou um modelo, apagar as mesmas do post.