Como criar resumo de postagem expansivel?

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

Esse é o famoso link “Leia mais…” que aparece nas primeiras páginas de alguns blogs e sites, onde se pode ler ou um resumo do artigo ou seu primeiro parágrafo e, caso o leitor queria saber mais e continuar lendo, basta clicar ali para abrir o restante do texto. Isso é extremamente importante para se ganhar espaço no blog, conforme usamos aqui também.

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

  • Novo Resumo de Postagens do Blogger – Hack “Leia mais”
  • Já tratamos aqui sobre esse assunto, mas resolvi reescrever o artigo. O antigo vai continuar publicado – Postagens expansíveis ou link “Leia mais” – para servir de referência. Foi um dos primeiros textos publicados aqui e sei que não ficou muito bom (eu mesmo estava aprendendo). Com um pouco mais de experiência, reescrevi o texto para ajudar melhor quem quer colocar essa facilidade em seu blog.


    Um blog tem que ser de fácil leitura e isso significa que o seu visitante não quer perder tempo passando páginas longas sem encontrar o que quer. As pessoas cada vez lêem menos e cada segundo na internet é precioso. Páginas com artigos longos ou muitos deles inteiros, demoram para abrir e fazem sua página lenta. Com isso, seu visitante pode não ter paciência em esperar e não ficará tempo algum.

    Veja como é fácil instalar Resumo de Postagens:

    1. Abra o painel do Blogger e clique em “Layout” e “Editar HTML”. Procure pela caixa de verificação “Expandir modelos de widgets” e marque a caixa. Sem isso não será possível encontrar as linhas do código e os locais para inserir as funções.

    2. Nas primeiras linhas do seu código, encontre “<head>” e logo abaixo copie e cole o seguinte trecho:

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

    3. Agora encontre a seguinte linha: “<data:post.body/>” e abaixo disso copie e cole o seguinte:

    <b:if cond=’data:blog.pageType != “item”‘><br />
       <a expr:href=’data:post.url’>Leia mais!</a>
    </b:if>

    O texto destacado em vermelho pode ser substituído como quiser, até mesmo por uma imagem ou com imagem e texto, como é aqui no [ Ferramentas Blog ].

    4. Clique no botão alaranjado “SALVAR MODELO”.

    Esta parte está terminada, mas agora falta ir em cada um dos seus artigos já publicados e determinar qual será a parte do resumo que aparecerá antes do link “Leia mais!”. Esse trabalho é nanual e terá que ser feito em todos os textos, nos já publicados e nos que você ainda for escrever.

    Sempre que escrever um artigo, será preciso inserir os seguintes códigos:

    Texto resumo da postagem.
    <span class=”fullpost”>
    Restante do texto que só aparece depois de clicar em “Leia mais!”.
    </span>

    Isso deve ser inserido após você digitar todo o artigo e já souber o que quer colocar escrito antes do link. Aqui no [ Ferramentas Blo ] usamos sempre o primeiro parágrafo dos textos como “resumo”. Para adicionar o código, na aba do editor do texto (“Criar”) escolha “Editar HTML”. Assim você verá o seu artigo em formato HTML; é aí que você colocará as linhas do código indicadas acima.

    Faça testes com um artigo antes de aplicar o código em todos; de preferência crie um novo artigo só para fazer testes. Lembre-se de sempre fazer um Backup do seu modelo antes de fazer qualquer modificação no código-fonte.
    Veja a ajuda original do Blogger sobre esse assunto clicando aqui!

    Já pensou em ser um(a) Blogueiro(a) mais Profissional?

    Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

    Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

    Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
    • Técnicas de produção de conteúdo
    • Fidelização do Público alvo
    • Divulgação e Técnicas de SEO
    • Métodos e técnicas de Monetização
    Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

    Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

    62 Comentários

    1. Ótima Dica! Era quase isso o que eu estava procurando. O que eu preciso mesmo é saber como colocar esse “Leia Mais” para abrir o restante do conteúdo na mesma página, sem precisar atualizar. Apenas expandindo o conteúdo oculto. Achei uma no blog Katempla, mas não funcionou no meu. Esse que você usa em seu blog é legal, mas pessoalmente não acho muito interessante levar o leitor a uma página apenas com a publicação clicada, muito provavelmente o leitor não voltará a página para ver o restante do conteúdo do blog. Apenas minha opinião. Mas a dica é muito boa, parabéns!

      Responder

    2. Muito Legal só que eu fiquei com uma dúvida. tem como colocar um video depois do leia mais, pq eu fiz um post assim só que o video fico na home.
      Valeu e olha lá como fico meu blog quem sabe vc naum pode me ajudar

      Responder

    3. mano que estranho, eu não consigo achar o “data:post.body/”””, não tem no meu html, tenho certeza, eu fiz uma pagina com todo o meu código só pra usar o ctrl f e procurar, procurei por data, date o nome completo, mais não tem esse nome no meu html

      Responder

    4. Erick.
      Ou seu template é completamente modificado ou é da versão anterior do Blogger.
      Então recomendo que vá na página de ajuda do Blogger e veja como ativar essa ferramentas em seu modelo.

      O nome para esse tipo de Modelo é “Modelo Clássico”.

      Responder

    5. Caro Marcos,
      Não consegui.
      Não entendi onde inserir os codigos: [span class=”fullpost”]
      e [/span]

      O restante acertei numa boa. Poderia me ajudar por favor?

      Responder

    6. Eduardo Costa,

      Tem que ler com mais atenção o tutorial.
      Esse trecho do código é pra ser inserido nos artigos. Isso tá bem claro acima.

      Responder

    7. Export.,

      Isso não tem como tirar. Esse implemento aparecerá em todos os artigos, não tendo como escolher que terá o link ou não.

      Responder

    8. Não consigo encontrar de jeito nenhum a linha mostrada no terceiro tópico. Será que pode estar escrito diferente no meu código do blogger?

      Responder

    9. Crítico,

      Veja a ajuda do blogger q está como fonte desse artigo.

      Vc não está encontrando pq vc usa um modelo de layout antigo, chamado de Clássico!
      Para os modelos Clássicos, tem q fazer de outro jeito q tá na ajuda!

      Responder

    10. meu amigo valeu meubloger gannho mais espaco eficou muito melhor pra trabalhar agora e so organizar e comecar a publicar valeu qual quer critica ou sugestoes serao bem vindas ate mais.

      Responder

    11. Obrigado! Tinha mudado o template de meu blog e não estava conseguindo colocar o reseumo de postagem. Achei sua dica no blog da Ariane.

      Valeu mesmo!!!

      Responder

    12. Este recuso leia mais, não tem uma maneira de ficar fixo em todas as postagens, mesmo nas novas publicações sem ter que eu colocar o codigo?

      Ou tenho que escolher um template novo que já tenha este recurso.

      Responder

    13. Ola amigo,beleza?

      cara já tentei de tudo no meu template…
      não estou conseguindo colocar esse hack leia mais.. com resumo de postagem expansível.
      Aqui no meu template ja tem um hack leia mais..
      mas é aquele que tem sempre que atualizar a pagina toda, entendeu,mas e eu queria mesmo colocar esse hack leia mais… expansível na mesma pagina. Eu tambem não sei qual é codigo do outro, para mim poder retirar!
      por favor peço sua ajuda se for possível??
      dê uma olhadinha no meu hack la?
      Já fiz tudinho como estava escrito aqui !
      peço ajuda ???

      Responder

    14. Crisian25,

      Cara, olhei o seu blog e está funcionando perfeitamente.
      Não entendi qual seria o seu problema!

      Responder

    15. Olá!!!
      Muito obrigado pela explicação. Muito bom.
      Só tem 1 problema, os vídeos aparecem na mesma…
      Não há forma de os videos so aparecer depois de carregar em “Leia mais”?
      Pode-se mudar a pocição do “leia mais”, ele está à esquerda, é possivel coloca-lo à direita?

      http://retirotuga.pt.vu/

      Cumprimentos

      Responder

    16. Retirotuga,

      Observe se o código dos vídeos está antes da tag de fechamento “[/span]”

      E, para alinhar o texto, basta adiconar os mesmos códigos no código-fonte para formatar um texto padrão.

      Responder

    17. Obrigado pela resposta tão rápida.
      A tag “[/span]” coloco mesmo no fim, depois do código do filme. Todo o texto que estiver depois do fime aparece também.

      Procurei em “Layout”, “editar html” e não consegui encontrar o 2º código, [b:if cond=’data:blog.pageType != “item”‘][br /]
      [a expr:href=’data:post.url’]Leia mais![/a]
      [/b:if].
      Como faço para mudar o “leia mais” para a direita?

      Obrigado

      Responder

    18. Retirotuga,

      verifica se no código HTML do artigo, no editor de textos do blog, se não tem mais de uma tag de fechamento [/span] inserida no texto.

      Algumas vezes o editor do Blogger acrescenta, replica essa tag, por isso dá esse erro.

      Responder

    19. Por acaso reparei nisso. Vi que já tinha uma tag de fechamento [/tag] inserida, retirei-a e coloquei só uma tag [/span] no fim. No entanto, o video aparece logo na mesma.

      Cumprimentos

      Responder

    20. Marcos, estou com uma única dúvida, no HTML da postagem aparece automáticamente várias tags “span”. Tentei apagar todas e deixei só a última no final do texto, mas quando salvo volta tudo de novo. Isso está atrapalhando na determinação do trecho que escolhi. Ao invés de aparecer somente um parágrafo, aparece o texto inteiro e no final o “Leia mais!”.
      Dá uma ajuda…

      Responder

    21. Vilmar,

      a melhor solução e passar a usar o Windows Live Writer para editar seus artigos do Blog.
      Acontece que usando o editor do blogger, algumas vezes, quando reeditamos os artigos, o Blogger recoloca algumas tags como tá fazendo no seu caso e isso atrapalha muito e refazer é mais demorado.

      Aqui ensinamos a instalar e usar o Live Writer:
      https://ferramentasblog.com/2009/05/video-tutorial-windows-live-writer.html

      Acho q vai resolver o seu problema!

      Responder

    22. CUIDADO!! Eu usei isso no meu blog por duas semanas e as minhas visitas caíram quase 80%, ai descobri que o crawler do google não estava mais indexando as minhas novas postagens… acredito que alguma parte desses códigos em alguns templates acabam por interferir no Crawler do Googlebot!

      Responder

    23. Futurauto,

      Eu mexo com isso a muito tempo e nunca ouvi falar de ningu’em q teve problemas.
      Acredito que vc teve algum outro problema.

      Responder

    24. Não tem nada a ver! O google parou de te indexar foi por qualquer outro motivo, com certeza. Já usei esse código e não tive nenhum problema. Recomendo!

      Responder

    25. Cara, excelente tutorial! Há tempos vinha matutando em como inserir esse hack no meu blog, mas como o tópico de Ajuda do Google é muito vago, sempre desistia no meio do caminho. Parabéns pela clareza e pela informatividade!

      Só estou apanhando pra colocar uma imagem em formato de seta ao lado do ‘leia mais…’: sempre que insiro a imagem ali, ou o ‘Leia mais’ acaba redirecionando pra URL da própria imagem (que está hospedada no Picasa) ou fica desativado.

      Vou continuar quebrando a cabeça por aqui por enquanto…

      Responder

    26. Marcos:

      Testado e aprovado no blog de testes!
      Estou apenas tentando criar o "Leia mais" em botão, via linha de comando(?) para configurar no blog. (Você teria uma dica?)

      Obrigado.

      Responder

    27. Ola Marcos!
      Obrigada mais uma vez pela sua paciencia e boa vontade com nós blogueiros de primeira viagem!Eu por exemplo!
      Amigo não esta aparecendo a tag [Leia Mais..]
      Já não sei mais o que faço para ajeitar o meu texto de livros e audios.
      Eu estou usando um template que contem o continuar lendo em espanhol.
      Sei la ta uma bagunça!
      Simplesmente esse codigo e o codigo dos slides da Ariane não estou conseguindo abrir e nem colocar nos meus blogs.
      Tu e a Ariane são 1000

      Responder

    28. eu gostaria de saber como ocultar a janela para comentar do resumo que aparece no resumo eu gostaria que aparecesse somente na paina que é aberta depois que se clica em leia mais !

      Responder

    29. Ewethon,

      o que aconteceu é que vc colocou o código do ítem 3 no lugar errado, por isso que os comentários estão aparecendo. Reveja o tutorial e siga conforma estabelecido.

      Responder

    30. Ewerton,

      Realmente vc colocou o código no lugar certo. O que deve tá errado é o lugar do código do comentário.
      Aí vc terá que entrar em contato com quem criou o seu template para ver com ele como corrigir o problema.

      Responder

    31. Oi Marcos, pq q akele template que vc criou a gente não precisa colocar o codigo na postagem, pq q ele vai automaticamente?

      Responder

    32. olá ,valeu mesmo acho que fica bem mais atrativo ,poe mais conteúdo,postagem em seus blogs .gostei muito. valeu .ja pus o blog nos meus favoritos!ate a proxima.

      Responder

    33. Gostei do post! Dá um pouco de trabalho para achar o código do HTML, mas vale e pena.

      Ferramentas sempre me ajudando! ;D

      Responder

    34. olá marcos,
      quando for colar no editor pde ficar do mesmo jeito que colou ou tem que alinhar,se tem que alinhar,como fazer?
      obrigado!!

      Responder

    35. Obrigado pela dica !!. Que Deus te abençoe. achei melhorou muito o Blog os textos não tomam mais a página inteira. Valeu !!!!

      Responder

    36. Excelente post. Este recurso é indispensável para qualquer blog, principalmente aqueles com matérias detalhadas. Sanou minha necessidade. Muito obrigado.

      Responder

    37. Uma ajudinha para os que estão tendo dificuldades de achar o código na selva de tags que é o template do blog: Antes de dar CTRL+F (find) para procurar o texto, marque uma pequena porção (qualquer coisa) dentro da caixa com o código. O FIND será corretamente direcionado para dentro da caixa de texto, e não fora dela, como acontece em alguns navegadores. Basta digitar o texto que estiver procurando e ser feliz. Paz para todos.

      Responder

    38. Sensacional!
      Não encontrei a solução deste problema em lugar algum, então resolvi vasculhar o seu blog. Sem dúvidas, na matéria antiga, você não tinha muita experiência, mas agora, pode se considerar como um profissional!

      Parabéns!

      Responder

    39. Maravilhoso!!!
      Na ajuda do Blogger tem as dicas, mas em nenhum momento falam que tem que expandir os modelos de widgets!!!
      Eita nois…. VALEU!!

      Responder

    40. Excelente explicação. apesar de não utlizar o formoso (Post "Continuar Lendo")
      fiz um teste pra ver se realmente funcionaria e o mesmo pegou legal
      diferente de muitos outros… esse aqui nota 10.
      estou com uma dúvida… por em vou tulizar seu Formulário… XD

      Responder

    41. Olá por ora estou apenas lendo vendo se aprendo um pouquinho. Quero ter mais visitar no blog, mas ainda não me dediquei a aplicar as tuas dicas.
      Parabéns pela iniciativa. Sempre estou aqui lendo alguma coisa.

      Responder

    42. Pingback: Dicas para Blog – Artigos de Fevereiro/2009 | [ Ferramentas Blog ]

    43. Pingback: Tutoriais e Dicas – criar Blog [ Intermediários ] | [ Ferramentas Blog ]

    Deixe um comentário

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