Posts resumidos no Blogspot sem gambiarras

Posts resumidos, um aperitivo para o leitor antes do prato principal...

Existem algumas técnicas diferentes para habilitar postagens resumidas na página inicial dos blogs hospedados no Blogspot. A maioria delas são variações de um tutorial disponível na Ajuda do Blogger que mostra:  Como criar resumos de postagem expansíveis. Onde depois de concluída sua configuração, é necessário adicionar um código específico em todas as postagens que serão resumidas, inclusive as já publicadas.

Apesar deste método ter lá suas vantagens, como a opção de escolher quais posts serão resumidos e exatamente em que parte do texto o "corte" para a postagem completa será feito, não gosto da idéia de precisar incluir manualmente um código em cada post para obter o resumo.

Em outra oportunidade publiquei um tutorial mostrando como exibir os títulos dos posts com conteúdo expansível, nas páginas de arquivo e marcadores de forma automática, sem necessidade de inclusão de códigos adicionais nos posts já existentes.

Só estava faltando uma forma automática de resumir os posts da página inicial no Blogspot, oferecendo um link "Leia mais..." ou "Continue lendo..." para acesso ao conteúdo completo e comentários de cada artigo, como é possível fazer no Wordpress.

Você pode estar se perguntando, mas porque eu publicaria apenas um resumo dos meus posts na página inicial do meu site? Existem várias razões para isso, entre elas destaco:

• Facilitar a navegação e localização dos assuntos, diminuindo a rolagem;
• Aumentar a quantidade de páginas exibidas por visitante;
• Potencializar a conversão dos anúncios nas páginas individuais;
  
• Estimular a participação do leitor através dos comentários.

Enquanto pesquisava para este post, encontrei uma discussão interessante no Revolução.etc: Post resumido na capa atrapalha? Veja o que Mestre Pai Mei o mala do @Cardoso disse nos comentários:

Seu jornal vem com todas as matérias completas na capa?
A Playboy, se fosse comprada pelas matérias, viria com os textos todos na capa?
Pois é, essa é a idéia de “capa”.
Caso encerrado.

Dito isto, vamos ao trabalho...

Resumo dos posts no Blogspot

Para configurar o resumo automático dos artigos na página inicial no Blogger, adaptei uma técnica publicada recentemente no BloggerBuster, que utiliza o plugin jQuery Expander (GPL) da Biblioteca JavaScript jQuery.

Optei por utilizar os posts resumidos com o link "Leia mais..." que leva a página individual dos artigos e não aquela que mostra um resumo expansível na própria página inicial, também disponível no original do BloggerBuster.

Antes de começar, acesse a edição do layout do seu template no painel de controle do Blogger e dentro da aba Editar HTML, clique no link Baixar modelo completo para baixar uma cópia de segurança do seu template.

Marque a opção Expandir modelos de widgets, localize (Ctrl + F) a tag </head> e imediatamente antes dela cole o seguinte trecho de código:

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
 
  $('.excerpt').expander({
    slicePoint:       280,  // default is 100
    expandEffect:     'fadeIn',
    expandText:         '[...]', // default is 'read more...'
    userCollapseText: '[^]'  // default is '[collapse expanded text]'
  });
 
});
</script>

O valor destacado em vermelho representa a quantidade de caracteres em formato Html, que será exibida nos resumos dos artigos.

Agora vamos substituir o trecho de código original que exibe o loop de postagens no Blogspot, por um código adaptado que vai permitir a exibição dos resumos dos posts na página inicial. Procure pelo seguinte código:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Substitua tudo por:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<p><a expr:href='data:post.url'>Continue lendo...</a></p>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

OBS: Se você usa o direcionamento por seção nos anúncios do AdSense e veicula publicidade do sistema de afiliados HotWords, o código ficará um pouco diferente:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>

<div id='HOTWordsTxt' name='HOTWordsTxt'>

<!-- google_ad_section_start -->

<data:post.body/>

<!-- google_ad_section_end -->

</div>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<p><a expr:href='data:post.url'>Continue lendo...</a></p>
<b:else/>
<div class='post-body entry-content'>

<div id='HOTWordsTxt' name='HOTWordsTxt'>

<!-- google_ad_section_start -->

<data:post.body/>

<!-- google_ad_section_end -->

</div>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Depois de fazer as substituições apropriadas, conforme o seu caso, visualize para verificar se não houve nenhum erro. Em caso Positivo, salve e corra para o abraço!

Os testes foram realizados no template padrão Mínima White, que está disponível para download com as alterações já aplicadas e pronto para usar. Não retire os créditos!

Template Compulsivo Posts Resumidos
©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)

Update 26/03/2010: Para este hack funcionar são necessários dois arquivos JavaScript hospedados externamente. Ná época que publiquei este post, tentei embutir os códigos no template, mas não deu certo.

Porém o host onde eles estavam hospedados, agora está cobrando pelo acesso aos arquivos. E por isso este hack deixou de funcionar, devido a interrupção do acesso aos JavaScripts necessários para o seu funcionamento.

Para solucionar este problema, cada um de vocês que utiliza este recurso, terá que hospedar seus próprios arquivos JavaScript e alterar as linhas relativas a eles no código do template.

Para começar baixe este arquivo compactado, ele contém os dois scripts que devem ser hospedados num host de sua preferência e que permita acesso direto a eles.

Você pode usar o Google Sites, hospedando cada um dos arquivos como um anexo (attachment) de página e utilizar o endereço do link para download do arquivo, sem o sufixo ?attredirects=0&d=1, ex:

Este é um exemplo de link para download de anexos no Google Sites:

http://sites.google.com/site/compulsivo/Home/Jquery.zip?attredirects=0&d=1

Você deve utilizar apenas a parte destacada em vermelho, ignorando o restante da URL.

Depois de hospedar os dois arquivos, anote a URL de acesso direto de cada um deles e substitua no código do seu template, conforme indicado abaixo:

<script language='javascript' src='http://SEU_HOST/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://SEU_HOST/jquery.extractor.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
 
  $('.excerpt').expander({
    slicePoint:       280,  // default is 100
    expandEffect:     'fadeIn',
    expandText:         '[...]', // default is 'read more...'
    userCollapseText: '[^]'  // default is '[collapse expanded text]'
  });
 
});
</script>

Imagem: TheAlieness GiselaGiardino