Resumo de Postagem Expansível automático

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Algumas pessoas têm dificuldades ou acham chato ter que adicionar um código em todo artigo para gerar os resumos de postagens para o link “Leia mais…” de seus textos aparecer. Este é o formato que uso aqui no [ Ferramentas Blog ]. Então descobri uma forma que faz o serviço automaticamente e não precisa editar os artigos depois.

 

ERRATA: O Blogger já disponibiliza esse serviço de forma padrão. Veja o novo tutorial, bem mais simples:

 


Os resumos de postagem que só aparecem na primeira página do blog e que a pessoa precisa clicar no link “Leia mais…” para continuar lendo, são uma ótima ferramenta para manter o seu blog leve e objetivo. Com esse recurso, as pessoas podem ler um trecho ou resumo dos textos e só continuar lendo o que quiserem. Esses resumos economizam espaço na página principal do seu blog e dão uma aparência mais limpa.

 

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:

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

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.

.

19 Comentários

  1. Nossa, é exatamente o que eu queria aprender a fazer, quando estiver com tempo, porque não estou agora, vou dar uma conferida neste post, valeu pela dica!

    Abraços!

    Responder

  2. Allgsm,

    é bem provável que, ou seu modelo é modificado ou seja o Modelo Clássico do Blogger.

    Só funciona nos modelos de Layout!

    Responder

  3. na verdade eu ate consegui pois achei a linha que corresponde a que você botou ai,
    mais não gostei do resultado a fonte da matéria ficou grande ai eu desisti

    Responder

  4. Muito bom,
    precisava de algo assim no meu blog, acho mque vai me ajudar a baixar um pouco a taxa de rejeição do google analytcs.

    Só não ficou 100% nos posts que contem fotos.

    Saudações,

    Responder

  5. Apliquei sem problemas no meu blog, mas faltou uma dica, a de como inserir uma imagem ao lado do link “Continue lendo…” assim como está aqui no [Ferramentas Blog], qual o tipo de html devo usar?
    Grato pela atenção, e parabéns pelo excelente blog!!!

    Responder

  6. Fábio,

    Inserir imagens é igual em toda parte do blog.
    Basta vc colocar o código de imagens ao lado do texto e pronto. Ou mesmo pode colocar uma imagem no lugar do texto.

    Responder

  7. Olá Marcos, tudo bem.
    Coloquei esta ferramenta em seu templante básico, o templante ficou muito bom, mas a postagem expansivel primeiro carrega toda postagem e só depois fecha.
    Obrigado…

    Responder

  8. Deu erro porque não encontro a totalidade da seguinte linhe de código:

    div class='post-body entry-content

    Apenas tenho a 1ª parte "div class='post-body"

    Responder

  9. Verifique o passo 1 indicado acima.
    Vc deve ter esquecido de marcar "Expandir modelos de widgets" para visualizar os códigos inteiros.

    Responder

  10. Muito útil, me ajudou em muito para meus contatos não precisarem escrever varias veses e sim em uma unica vez, muito obrigado pela postagem

    Responder

  11. Olá Gostei muito do post!

    Fui util para mim estava procurando como usar jquery no blogger.

    Se tiver mais dicas post

    Valeu

    Responder

  12. Puxa vida! Faz dias que estou procurando algo semelhante para colocar no nosso Blog, mas achei códigos extensos e complexos. Mas este foi perfeito. Quero agradecer porque ficou do jeitinho que queríamos. Só tive que aumentar o tamanho do slicePoint de 280 para 800, porque as minhas postagens tem fotos ou desenhos no começo, então com 280 estava aparecendo somente as reticências.
    Amei esta dica!

    Deus abençoe vocês!

    Para quem quizer conferir como ficoum, este é o link do nosso Blog:

    http://trabalhadoresdoreino.blogspot.com/

    Responder

  13. Muito bom já foi implantando com sucesso no blog tudo grátis apenas estou fazendo alguns ajustes para os visitantes não xingarem a minha mãe.

    Responder

  14. Muito boa essa dica Marcos, porém ainda não é o que eu queria, pois todas as minhas postagens contém imagens e tomam quase todo o espaço da postagem, se vc souber de alguma forma de diminuir essas imagens e posicionar no canto esquerdo posta ai OK!.

    Parabéns por este blog! Obrigado!

    Responder

  15. Olá Lemos, tudo bom?
    Na minha opinião achei bobagem você ter "riscado" este artigo.
    Por que, mesmo que o blogger ofereça uma forma mais simples para se fazer isso, existem usuários (assim como eu) que optam por um resumo automático como esse.
    Fica aqui minha opinião ! Até mais.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.