Neste tutorial ensinarei uma das formas de mostrar na tela principal do Blog apenas um sumário dos posts com o link “Leia Mais” no final que leva ao post completo.

Alterando o código HTML do layout

Primeiramente, vamos fazer o logon na conta do Blogger, no ‘Painel‘ clicar em ‘Layout‘:

Na próxima tela clicar em ‘Modelo‘ e em ‘Editar HTML‘:

Observação: Antes de qualquer alteração no código HTML da página, faça uma cópia de segurança do mesmo. Clique em ‘Baixar modelo completo‘ e salve o arquivo XML em um local seguro.

Com o modelo salvo, clique em ‘Expandir modelos de widgets‘:

Procure pela tag </head> e copie TODO o código deste link ANTES da tag.

Procure agora pelo trecho de código:

:

<div class='post-body'>
<p><data:post.body/></p>

Substituir as duas linhas pelo código abaixo:

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>

<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>

<span id='showlink'>
<a expr:href='data:post.url'>Leia Mais?</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Pronto, clique em ‘Visualizar‘ e veja se está tudo certo, se estiver tudo OK clique em ‘Salvar Modelo‘.

Neste ponto ainda não é possível perceber nenhuma mudança visual no blog.

Alterando o modelo de postagem

Vamos agora alterar o modelo de postagem para que durante a criação do post, possamos definir o que será mostrado no resumo e o que será mostrado somente depois de clicar em ‘Leia Mais‘.

Na parte superior do Blogger clique em ‘Configurações‘ e depois em ‘Formatação’:

Vá para o fim da página até chegar em ‘Modelo de postagem‘, na caixa de texto em frente copie e cole o trecho de código abaixo:

Digite aqui o resumo do post

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

Clique em ‘Salvar Configurações‘.

Pronto, de agora em diante quando clicarmos em “Criar Postagem“, a caixa de texto mostrará onde devemos digitar o resumo do post (a parte que irá aparecer antes do link “Leia Mais”) e onde digitar o resto do post (a parte que aparecerá somente na página do post).

Observação: Certifique-se que as tags <span id=”fullpost”> e </span> não foram alteradas, elas precisam ficar intactas para que o hack “Leia Mais” funcione.

Observação: Os posts antigos não apareceram resumidos, será necessário alterá-los um a um se você desejar que este hack funcione para eles (veja como fazer isso mais abaixo).