Blogger: mostrando sumário do post com link “Leia Mais” para o post completo

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.
Esse recurso é o mesmo que utilizo aqui no INFOWARE BR.





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 1: 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 2: 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).

Problemas conhecidos: o criador deste hack, Ramani - http://hackosphere.blogspot.com/, avisa no post original que se você clicar no link “Postagens Mais Antigas“, é possível que o link “Leia Mais” apareça mesmo em posts antigos que não foram divididos. Este é um problema conhecido, para o qual ele ainda não encontrou solução.

Perguntas

1 - Quero que certo post seja mostrado inteiro, sem o link “Leia Mais”, como fazer?

Ao criar a nova postagem, antes de começar a digitar, delete todo o conteúdo existente da caixa de texto.

2 - Quero configurar um post antigo com o hack de “Leia Mais”, como fazer?

Voce deve alterar cada post individualmente. Ao editar clique para visualizar o código fonte, escolha o local onde irá aparecer o link “Leia Mais” e adicione a tag <span id=”fullpost”>, vá para a ultima linha no post e adicione após o último texto </span>.
Cuidado: Fique atento com esta alteração, pois a tag <span id=”fullpost”> não pode ficar entre outras tags.
No exemplo a seguir o hack não irá funcionar: <p>
blablabla <span id=”fullpost”> mais blablabla </span></p>

Posted in: Blogger, Hacks