Resumo de post expansível

Desde que escrevo no Beira Mar venho alterando alguns detalhes visuais do site para agradar mais aos nossos olhos - os meus e os seus -. Foram modificações sutis, como nova diagramação ou alteração de alguns menus laterais do blog.

Ja faz um tempo que quero implantar por aqui os resumos de post expansível ou expandable post summaries. Alguns podem não saber o que é, mas a maioria ja clicou em um! Com essa ferramenta podemos exibir algumas das primeiras linhas do post na página principal do blog e colocar um link para que o leitor possa abrir o post completo, caso tenha interesse. Assim o blog fica menos poluído e a navegação não fica prejudicada pelos textos mais longos.

Criei dois exemplos para explicar melhor essa ferramenta:

1. Nesse todo o texto do post é exibido na página principal do blog (click aqui)
2. Agora apenas o começo do texto do post é exibido na página principal do blog. O texto completo aparece apenas quando você clica em Clique aqui para exibir o texto completo (click aqui).

Nesse post vou explicar de forma simples e clara como implantar essa função em seu Blogger.

Observação: Esses passos funcionam para quem usa um dos novos modelos do Blogger. Quem usa o modelo Clássico pode ter de adaptar os comandos abaixo. Nesse caso recomendo usar os links das fontes de pesquisa, no final do post, para ter mais informações.

Passo 1. Para começar, essa função precisa ser configurada no HTML do seu blog. Para editar o HTML clique em Modelo e em seguida Editar HTML. Não esqueça de habilitar a opção Expandir modelos de widgets, conforme a imagem abaixo. Antes de editar o código HTML do seu blogger recomendo que você faça uma cópia do html atual clicando em Baixar modelo completo. Caso você tenha algum problema com as alterações basta selecionar o arquivo salvo no seu computador e clicar em Fazer upload para restaurar todas as configurações.


Passo 2. Procure no código html o texto </head>. Você deve copiar e colar o código abaixo entre <]]>/b:skin> e </head>:

<!-- início do texto expansivel by rbuzelli.blogspot.com -->

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

<!-- fim do texto expansivel by rbuzelli.blogspot.com -->

Com essa primeira alteração o código html deve ficar assim:

Passo 3. Agora procure no código html o texto <data:post.body/>. Copie e cole o texto abaixo logo abaixo dele:

<!-- inicio da alteração para texto expansivel by rbuzelli.blogspot.com -->
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Clique aqui para ler o texto completo.</a>
</b:if>
<!-- fim da alteração para texto expansivel by rbuzelli.blogspot.com -->

Fazendo essa alteração o texto deve ficar assim:

Observação: Nessa hora você pode fazer uma alteração! No código acima, o texto Clique aqui para ler o texto completo. é a frase que vai aparecer sempre que o seu post for publicado usando o resumo de post expansível. Caso você queira mudar essa frase basta alterar o texto! Por exemplo, você pode usar o código abaixo para usar a frase Se quiser ler mais, clique aqui!:

<!-- inicio da alteração para texto expansivel by rbuzelli.blogspot.com -->
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Se quiser ler mais, clique aqui!</a>
</b:if>
<!-- fim da alteração para texto expansivel by rbuzelli.blogspot.com -->

Passo 4. Clique em SALVAR MODELO e as alterações no código estão prontas! Não foi tão difícil, foi? Agora vamos ao mais fácil, um pequeno código que precisa ser usado em cada novo post que você criar: <span class="fullpost"></span>.

Para cortar o texto dos seus post no ponto que você quer será preciso usar o código acima da seguinte forma:

Essa parte do texto eu quero exibir na página principal do meu blog.

<span class="fullpost">Ja essa parte do texto só será exibida quando a pessoa visualizar o post completo, clicando no link no final do texto.</span>.

Quem for ler o seu blog verá o texto abaixo na página principal:

Essa parte do texto eu quero exibir na página principal do meu blog.

Clique aqui para ler o texto completo.

Quando clicar no link ou entrar direto no post, ao invés de navegar em sua página principal, ele verá:

Essa parte do texto eu quero exibir na página principal do meu blog.

Ja essa parte do texto só será exibida quando a pessoa visualizar o post completo, clicando no link no final do texto

Com isso você está pronto para escrever seus posts expansíveis! Só falta agora a dica de como automatizar seus blog de forma a todos os seus próximos posts terem o código <span class="fullpost"></span> incluso.

Passo 5. Clique em Configurações, selecione Formatação e na lista de opções que você terá procure Modelo de postagem. O modelo de postagem é um campo onde podemos digitar um texto que será incluído em todos os novos posts. No campo em branco copie e cole o código abaixo:

.

<span class="fullpost">..</span>

O seu modelo de postagem deverá ficar conforme a imagem abaixo:


Agora sempre que você criar um nos post basta substituir "." pelo texto que deverá ser lido na página principal ".." pelo restante do texto.


POST ATUALIZADO
dia 09|01|09 . 08:20.12:57

Passo 6.Com os passos acima o código causa um efeito colateral no blog. O texto Clique aqui para ler o texto completo aparece no final de todos os post, mesmo os que foram publicados antes da alteração. Eu havia colocado uma observação do começo desse tutorial detalhando o problema, mas agora encontrei uma solução!

Sempre que você quiser publicar um post sem usar o resumo expansível basta adiconar no final do texto o código:

<span class="fullpost"><div></span></div>.

Para facilitar meu trabalho, atualizei meu modelo de postagem (ver o passo 5) com o código abaixo:

.

<span class="fullpost">..<div></span></div>

Dessa forma eu posso apagar o ".." quando quero escrever um texto curto e a mensagem do texto expansível não aparece. Quando quero dividir o post eu apenas apago <div></div> e substituo ".." pela segunda parte do texto.

The End

Detalhei cada parte do processo para não deixar dúvidas. Quando você for colocar em prática verá que é mais simples do que parece! Qualquer dúvida ou sugestão, basta deixar um comentário no tópico. Espero que seja tão útil pra você quanto foi pra mim!


FONTES DE PESQUISA
Minha primeira fonte de consulta foi o help do próprio Blogger (em português e em inglês). Só que as informações dele não são muito claras e só me ajudaram com as palavras chave que eu usei para pesquisar no Google. Com elas eu cheguei em dois blogs, Vento Sueste e Dummies Guide To Google Blogger Beta.

Existe uma outra opção para adaptar textos longos ao seu site: a ferramenta exibir/ocultar textos ou show/hide links , também explicada na Ajuda do Blogger. Como você pode ver aqui, apesar do bom humor de quem explicou o código ficou algumas lacunas. Tentarei escrever em os detalhes dessa outra ferramenta.