Resumo de Postagem Expansível automático

Aqui já ensinamos a usar o modelo padrão do Blogger: “Como criar resumo de postagem expansível”. Com essa dica para seu blog, o serviço é feito em duas partes. Uma é inserir os códigos no código-fonte do blog e outro código nos artigos. É como usamos aqui no [ Ferramentas Blog ] e gosto muito do modelo que é perfeitamente personalizável.

Mas tem gente que não quer ter que se preocupar em inserir códigos em cada artigo. Então descobri no Usuário Compulsivo uma técnica bem simples e direta e que você só terá que adicionar as linhas de código no código-fonte do seu blog uma única vez e a função será aplicada em todos os seus artigos.

Repito! Essa função e a outra que ensino são aplicadas a todas as postagens, não tem como escolher qual terá e qual não terá o link de “Leia mais…”.

Antes de fazer qualquer modificação no HTML do seu blog, lembre-se de fazer um backup de segurança para evitar problemas. Veja nosso artigo “Backup do modelo de layout do Blog” para saber como proceder.

Veja como instalar o novo modelo.

1. Vá ao Painel do Blogger e escolha a aba “Layout” ~> “Editar HTML” e marque na janela do código-fonte a opção “Expandir modelos de widgets”.

2. Procure pela linha que conste “</head>” e, ANTES dela, cole o seguinte:

<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 indicado em vermelho determina a quantidade de caracteres, incluindo códigos HTML, que irão aparecer como resumo das postagens. A parte resumida é determinada, então, pela quantidade de caracteres que aparecerão na página inicial do blog.

3. Agora, deve-se substituir o trecho padrão do código que mostra as postagens inteiras na primeira página, pelo código do link para o resumo. Para isso, encontre exatamente esta parte:

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

Isso já está em seu blog. Basta encontrar.

4. Encontrado o trecho acima no seu código-fonte, troque 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>

O que está indicado de vermelho pode ser trocado pelo texto que achar mais adequado ou mesmo por uma imagem.

5. Salve e veja o resultado. Automaticamente os seus artigos já aparecerão resumidos na primeira página e com o link para seus leitores clicarem e continuarem lendo.

Se quiser aumentar ou diminuir a quantidade de caracteres que aparecem no resumo, volte ao código-fonte e altere o número em vermelho mostrado acima. Faça testes para determinar o melhor tamanho para o seu caso.

Caso prefira ou, antes de implementar esse modelo, veja o padrão do Blogger para resumo de postagens:

• Como criar resumo de postagem expansível

E veja outros artigos que podem ajudar a melhorar o seu blog, como:

• Colocar Publicidade dentro dos artigos
• Códigos HTML para editar Blog
• Lista de postagens relacionadas

Aqui temos artigos que podem ajudar muito a melhorar o seu blog e várias funcionalidades e dicas para você. Continue lendo e pesquisando aqui.