Posts resumidos na página inicial do Blogger

Capa de Revista
Lugar de conteúdo completo não é na capa! (imagem: Fun On It)

Já postei um tutorial mostrando como resumir todas as postagens da página inicial nos blogs hospedados no Blogspot, sem inclusão de códigos adicionais nos posts. Porém esta abordagem não é a mais apropriada quando intenção é resumir apenas alguns posts e não todos eles.

No tutorial a seguir vou mostrar como configurar seu template para resumir seletivamente apenas algumas postagens no seu blog no Blogger, através de um pequeno delimitador que deve ser incluído diretamente no código dessas postagens.

Antes de começar, faça um backup do seu template. Marque a opção Expandir modelos de widgets e cole o script abaixo antes da tag </HEAD>:
<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

Em seguida, procure um trecho de código semelhante a este:
<div class='post-body'>
<p><data:post.body/></p>

Substitua tudo, pelo código adaptado a seguir:
<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Continue lendo &gt;&gt;</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Visualize para verificar se não há problemas, em caso positivo salve e a alteração no seu template está pronta. Porém, deve ser incluído um pequeno delimitador no código de cada post que deve ser resumido, conforme o exemplo abaixo:
Resumo (exibido na página inicial)
<span id="fullpost">
Restante do conteúdo
(exibido apenas nas páginas individuais)
</span>

Para facilitar a inclusão deste delimitador nos seus próximos posts, você pode incluir essas linhas de código como seu Modelo de postagem, através das opções de formatação no Painel de Controle do Blogger.

A vantagem desta abordagem é que é possível escolher quais posts serão resumidos e exatamente em que parte do texto o corte deve ser feito, ao contrário do método explicado no tutorial anterior, que faz o resumo automático de todos os posts com base na contagem de caracteres do seu código html.

Via: Hackosphere

Comentários

  1. Realmente assim e muito melhor, mas mesmo muito! da outra maneira fica foleiro porque todos ficam resumidos!

    Grande dica

    (Agora tho mais uma dica que lhe peço pq ja procurei inumeras veses na net e nao encontro... é como colocar aqueles icones da technorati a frente das categorias do post) ;)

    Abraço

    ResponderExcluir
  2. Primeiro, segundo ou terceiro? xD

    Eu já havia visto este hack instalado em alguns blogs conhecidos, e estava me perguntando como instalá-lo. Muito interessante. Talvez eu instale no meu blog, dependendo.

    Abraços,

    Alberto.

    ResponderExcluir
  3. NOOSSA , ISTO É MUITO VELHO

    desculpa compulsivo tive que dizer.. rsrsrs

    mas assim:

    vc poderia aproveitar akele seu tutorial de widgets na pagina inicial ou não.


    exemplo

    basta usar akela tag de gadget apenas na pagina inicial, ai colocava a tag


    < b:if cond='data:blog.url == data:blog.homepageUrl' >

    < style >

    .fullpost{display:none;}

    < / style >

    dentro do body,

    ai na postagem vc faria assim:



    postagem que aparece na pagina inicial

    bla bla bla bla bla
    bla bla bla bla bla
    bla bla bla bla bla
    bla bla bla bla bla


    < div class=' fullpost ' >

    Resto da sua postagem(que vai aparecer na pagina propria..)

    bla bla bla bla bla
    bla bla bla bla bla
    bla bla bla bla bla
    bla bla bla bla bla
    bla bla bla bla bla
    bla bla bla bla bla
    < / div >
    xega ser melhor, pois vc n vai usar java script


    =D


    flws

    ResponderExcluir
  4. Boa Dica Usuário Compulsivo....issso ajudará muito o meu blog ;-) pois como vc disse nunca devemos colocar todos os ovos dentro de uma cesta kkk, valeu, n sei se a sua frase esta correta, mas da para entender a mensagem

    ResponderExcluir
  5. @storm-ex.com, sem o JavaScript o link "Continue lendo >>" será exibido no rodapé de todas as postagens...

    []'s
    Compulsivo

    ResponderExcluir
  6. é muito dificil tente resumir

    ResponderExcluir
  7. já vi isso há muito tempo, pq só agora estão falando, como se fosse uma descoberta.. ?

    só que oq uso no meu nao resume todas postagens, quando quero resumir uso este codigo do fullpost... dá na mesma.. se nao quero rsumir nao adiciono o codigo, se quero coloco..
    tem alguma diferença nesse sentido ?

    ResponderExcluir
  8. @Samuel, em nenhum momento foi dito que é um recurso inédito, ou uma "descoberta' revolucionária...

    []'s
    Compulsivo

    ResponderExcluir
  9. Esse hack é o que uso, simples e eficiente!

    ResponderExcluir
  10. Interessante para quem escreve muito e/ou gosta de colocar vários posts no seu pagehome ( que não é o meu caso, gosto de resumir o máximo "ser objetivo" possível para a leitura não ficar cansativa)

    ResponderExcluir
  11. Compulsivo, boa dica!
    Por acaso vc sabe o que acontece com alguns textos quando são colocados alguns parágrafos na segunda parte (Restante do conteúdo)as letras aparecem bem pequenas?? Há alguma alteração a ser feita no código?

    Obrigado e aguardo!!!

    Abraços!

    ResponderExcluir
  12. Não consigo encontrar o segundo código que deve ser substituido (div class='post-body'etc etc etc


    Existe alguma possibilidade dele vir de outra forma?
    Obrigada!

    ResponderExcluir
  13. Compulsivo, eu tenho um adendo a fazer. Eu tive melhores experiências quando substituí o uso da tag span pela tag div, pois essa segunda é melhor para incorporar blocos de parágrafos e suporta melhor divs aninhados. A tag span é mais útil quando você está a selecionar somente partes do texto dentro de um parágrafo.

    É só uma sugestão. Eu particularmente uso essa tag no lugar da tag span.

    Abração. Seu blog é sempre muito inspirador !!

    ResponderExcluir
  14. ::: Olá, Compulsivo. Uma opinião sobre esse recurso: é muito chato. Hoje em dia, as pessoas passam rapidamente pelos blogs para ler as mensagens e ignoram, muitas vezes, qualquer obstáculo. E só um trecho do texto é um obstáculo, até para quem tem costume de ler blogs. Pense nisso. Deixe seu texto na íntegra na página principal. Seus leitores agradecem! Abração e parabéns pelo trabalho, só pra variar... rs rs

    ResponderExcluir
  15. Ze Marcos, infelismente eu discordo de sua opinião. Se a pessoa não está interessada em ler o post, ela não vai ler ele mesmo que esteja na íntegra. A vantagem aí é permitir vc ter uma prévia do que vai ser publicado de forma mais extensa, a não ser que os posts sejam bem pequenos. Aí sim vc não terá vantagem nenhuma mesmo.

    ResponderExcluir
  16. Esse é o melhor hack para resumir os posts...
    E eu concordo com o comentário acima: "Se a pessoa não está interessada em ler o post, ela não vai ler ele mesmo que esteja na íntegra."...

    ResponderExcluir
  17. Compulsivo, não sei se só aconteceu comigo, mas acabei de perceber que esse hack não está funcionando no Firefox...
    Você tem alguma idéia do que seja?

    ResponderExcluir
  18. Apliquei e resultou na perfeição. E divulguei a fonte, remetendo para este texto.

    Gracias.

    ResponderExcluir
  19. Nossa ninguém disse que teve problemas, ou melhor, quase ninguém.

    Eu pus no meu blog e o 'continue lendo', aparece no fim da postagem. E fiz exatamente como você disse.

    Será que este erro é por causa do firefox, assim como disse o semnome.net ?

    Mesmo assim, thanks pela ótima dica

    ResponderExcluir
  20. @SemNome e @Italo, segui exatamente esses passos e está funcionando perfeitamente bem em qualquer navegador...

    []'s
    Compulsivo

    ResponderExcluir
  21. @Compulsivo, você está certo. O problema é que eu estava colocando a tag <span id="fullpost"> dentro de parágrafos.
    O IE lê normalmente, já o Firefox não...

    Para isso acabar, é só não usar a tag <p> ou usar o <span id="fullpost"> depois de uma frase completa.
    E para corrigir o resto, tem que editar post por post..

    ResponderExcluir
  22. Vlw compulsivo...tu é o Steve Jobs do blogspot!
    Abraço

    ResponderExcluir
  23. Não consigo encontrar o segundo código que deve ser substituido (div class='post-body'etc etc etc


    Existe alguma possibilidade dele vir de outra forma?[b][2][/b]

    *Copiado de Senhorita

    ResponderExcluir
  24. adorei de verdade
    muito obrigado

    ResponderExcluir
  25. Esse hack é incrível! Tentei usar a outra versão, sem javascript, mas o "continue lendo" aparecia em todas as páginas! Esse código foi a solução! Muito bom!

    ResponderExcluir
  26. Eu tinha instalado outro desse sistema e agora deu "pau" quando tentei instalar este... Vou tentar resolver.

    ResponderExcluir
  27. Compulsivo, primeiramente gostaria de te parabenizar pelo trabalho excepcional e o profissionalismo. Ja me tornei um visitante assiduo deste blog. Sei que com tamanha popularidade e dificil atender a todos que pedem ajuda. Mesmo assim vou tentar e vou entender se nao puder responder.
    segui tuas instrucoes e consegui fazer o resumo das postagens da pagina inicial mas estou diante de um dilema. Quando elas se ficarem velhas gostaria de saber como fazer para reverter o processo e deixa-las na forma original. Eu tentei voltar na pagina de edicao do blogger para apagar os codigos de resumo e "span" de um dos posts mas notei que eles sumiram embora o post esteja resumido. Meu caso tem solucao? Fico muito grato se puder me ajudar com alguma informacao.

    ResponderExcluir
  28. @endlessstream se você retirar o código JavaScript do eu template os posts não serão mais resumidos...

    []'s
    Compulsivo

    ResponderExcluir
  29. "Interessante para quem escreve muito e/ou gosta de colocar vários posts no seu pagehome...cansativa".HeHeHe!!! Mudei de opinião vou começar a adotar esta metodo em alguns post da "homepage" e não pagehome (faz parte, errar e do ser humano).

    Vlw

    ;)

    ResponderExcluir
  30. compulsivo.
    e como fazer caso uso o anuncio do hotwords???

    ResponderExcluir
  31. obg obg obg \o/
    deu super certo (: (y)

    ResponderExcluir
  32. Muito bom esse recurso minha pagina principal estava ficando cansativa porque tinha 10 postagens. Aparecendo em resumo ficou melhor.

    ResponderExcluir
  33. Muito bom!!
    Eu tinha usado o outro tutorial pra resumir postagens do seu site e ficou tudo zuado, mas o esse aqui é muito bom!
    Grato.

    ResponderExcluir
  34. Ficou muito legal e é muito simples de implementar!

    ResponderExcluir
  35. Precisei fazer umas correções no meu pois estava mostrando resumido no IE7 e o post inteiro no Firefox, Chrome e Opera.
    Tive que trocar as span por div, e tambem no layout a parte que mostra o link continue lendo span por div
    Agora parece que deu certo em todos os navegadores, sempre coisinhas para serem ajustadas, mais é muito bom esse hack.

    ResponderExcluir
  36. @Atualidades by Mairo

    Cara... Eu acho que estou passando por problemas semelhantes... Quando a gente seta lá aquele modelo de post com os spans e as tags do adsense, a gente só consegue editar o código via html. Se a gente usar aquele formulario bonitinho wisywig, os spans se multiplicam dentro de cada tag html aberta... dentro de novos div's, dos pre's, etc, etc...

    Eu acho que vou seguir a sua dica e trabalhar com div ao invés de span

    ResponderExcluir
  37. Muito melhor este jeito, nos usavamos aquele outro estilo que você tinha ensinado, mas quando experimentamos esse adoramos você esta de parabéns.

    Compulsivo seu blog e muito respeitado por toda a Internet, só refletindo todo seu trabalho e dedicação que você tem com todos nos, são pessoas como você que decifram os códigos e mostram o caminho da sabedoria, forte abraço desculpa os erros de pt.

    ResponderExcluir
  38. Valew, cara =D
    Muito boa!

    ResponderExcluir
  39. Cara, gostei de mais deste post, para o meu blog foi muito útil.

    ResponderExcluir
  40. Depois que coloquei esses códigos notei que os anúncios hotwords sumiram. Tem que mudar alguma coisa no código?

    ResponderExcluir
  41. Compulsivo, quando vou resumir alguma postagem que contem alguma imagem no final do post, a imagem que não deveria aparecer na home(pagina inicial) APARECE, por que?

    []...
    Pablo Simões

    ResponderExcluir
  42. Olá Usuário Complsivo, a idéia é muito boa, e também fica muito legal, da pra ver aqui no blog mesmo. Também coloquei, a diferença é que aqui no hack de vocês, não aparece o posta por ....., as ...hs. gostaria de saber como vocês ocultaram. Por que estéticamente não fica legal.

    ResponderExcluir
  43. Ola, estava tentando fazer isso no meu blogger, mas quando chega na parte de encontrar o texto:

    class='post-body'
    data:post.body


    (tirei umas partes do codigo para conseguir comentar sem dar erro, n sei como fazer para n dar erro, colocar na caixa)
    Não encontro ele de jeito nenhum, oque eu faço?

    ResponderExcluir
  44. Ola! Obrigada por essa dica. Eu estou tendo problema em fazer o corte do resumo no meu blog quando eu tenho fotos postadas. O texto e cortado no resumo, mas as fotos saem publicadas. Fica pessimo assim, claro. Voce tem alguma dica como resolver este problema? Muito obrigada!!!

    ResponderExcluir
  45. infelismente, usando este codigo, meus posts onde contem video enbed do youtube, acaba por nao mostrar os videos /;

    ResponderExcluir
  46. Valeu pela dica, cara... impressionante é como tem gente chata, o compulsivo tá dando uma força e tem corneta ainda reclamando que é algo antigo...rs.. pra mim não é, e vou usar. Valeu!

    ResponderExcluir
  47. Compulsivo,quando procuro o trecho de código semelhante a (div class='post-body'etc etc etc, não encontro de jeito nenhum, utilizei o Ctrl-F, procurei linha por linha e nada de achar, li os comentários e vi que outras pessoas estão com os mesmos problemas e não houve retorno, você teria como ajudar? Outra dúvida, para dividir as postagens é no mesmo lugar que postamos? Não entendo muito ainda e estou me sentindo como se estivesse me afogando numa gota d`água...kkkkk
    Descobri seu Blog ontem estou fascinada, parabéns, primeira de luxo!

    ResponderExcluir
  48. Caraacaaa muitoo feraa \õ/
    Eu andei procuando aqui no blog mais ainda não encontrei
    sera que você não tem aquele widget que contaa a nota , tipo o das estrelinhas do youtube , que você marca quantas estrelas a postagem tem .
    me mandaa o link dele ae .

    vaaleeu cara .

    ResponderExcluir
  49. All right!
    Explicado, entendido e feito!

    ResponderExcluir
  50. I love Usuario Compusivo ♥

    ResponderExcluir
  51. OI!!! Sou eu de novo!!!
    To fikando chata jah neh!!! Toda hora perguntando coisas, mas sabe o que acontece, depois que eu coloquei isso no meu blog, quano eu clico no "Leia mais..." aparece uma mensagem de erro que o Internet Explorer não pode abrir o site .... blá blá blá", mas isso não acontece se eu estiver logada no Blogger, vc que é o Mestre pode me ajudar com este impasse please, o que eu tô errando? Tem alguma coisa a ver com eu editar todo o post, já que cada vez que eu dou enter no meio da postagem, eu tenho que ir no editar HTML e apagar o código que aparece e deixa as letras minúsculas?

    ResponderExcluir
  52. muiiiiiiiiiiiitooo obrigada !!

    ResponderExcluir
  53. Olha Compulsivo.. Depois que aprendi que esse blog tem tudo que eu preciso pra deixar um blog pelo menos com uma cara mais profissional..
    Venho aki todos os dias pra saber de novidades... já virei um adepto do seu blog.. it's very good.. vlw...

    ResponderExcluir
  54. "Para facilitar a inclusão deste delimitador nos seus próximos posts, você pode incluir essas linhas de código como seu Modelo de postagem, através das opções de formatação no Painel de Controle do Blogger."

    Como fazer isto ???????

    agradeço desde ja !

    ResponderExcluir
  55. Compulsivo, este hack deixa todas as postagens com o link 'Leia mais'. Mesmo se não for colocado o código referente:
    "span...(Que o blogger não permite que eu escreva aqui.)"
    , ele irá aparecer no final do post.
    Você sabe alguma solução para isso?

    ResponderExcluir
  56. esse post é FODA!

    manda um salve ai pros mano da xurupita!

    ResponderExcluir
  57. Valeu, apanhei um pouco mais deu certo. T+

    ResponderExcluir
  58. Realmente isso economiza muito aquela rodinha no centro do mouse!
    Muito boa essa dica

    ResponderExcluir
  59. Olá
    Muito obrigado, em primeiro, pela informação e formação.
    Em segundo, sempre que resumo a mensagem e tenho no final uma apresentação fotos, do tipo slide.com, a apresentação aparece sempre, mesmo inserindo o < / span > no final, quando o que pretendo é que esta só seja vista na mensagem inteira.

    ResponderExcluir
  60. Mais uma vez...
    Coloquei os tags "div" antes e depois do "span" e já consegui o que pretendia.
    Um abraço

    ResponderExcluir
  61. Muito legal esses tutoriais, é so pensar o que o blog ta faltando que tem tutorial aqui, lindo blog, não conhecia: ja to no google reader e no feed.

    ResponderExcluir
  62. Olá Compulsivo. Está funcionando apenas no Explorer. No Firefox, a página desaparece (fica carregando por anos). O que devo fazer ?
    Obrigado.

    ResponderExcluir
  63. Boa Compulsivo, implementei no meu Blog e funcionou.
    Assim como algumas pessoas acima também não encontrava o trecho < div class='post-body'> fiz um teste trocando pelo mais "parecido" < div class='post-body entry-content'> e não é que funcionou! Que Beleza.
    Ah! faltou também para ficar 100% fechar com < /div>".
    Abraço.
    Alexandre Ribeiro

    ResponderExcluir
  64. @Compulsivo Eu conseguir adaptar o código no meu tamplate normalmente, embora, quando vou utilizar com algum texto que eu mude a fonte e justifique, o "Leia mais..." da um espaço muito grande. Você tem idéia do que seja?

    Qualquer ajuda é bem vinda, claro.

    ResponderExcluir
  65. Ola. Gostaria De Saber Se Tem Algum Jeito De Resumi Todos Os Posts, Mais Se Eu Não Quizér Resumir Algum Post... Tem Algum Jeito ? Obrigado Pela Atenção

    ResponderExcluir
  66. Graças a Deus encontrei o que procurava, depois de testar um monte de hacks, esse era exatamente o que eu queria.
    Muito obrigado.

    ResponderExcluir
  67. Compulsivo, se cada vez que entro aqui no seu blog eu comentasse, acho que daria um bug no contador...rs. Venho aqui sempre que troco de template (isso ocorre com certa frequência). Considero seu blog, junto com dois ou três outros, como minha bíblia de blogar. Obrigado por seus tutoriais atemporais que me socorrem nos momentos de dificuldade... e de diversão em sua maioria.

    ResponderExcluir
  68. Obrigado mais uma vez, Compulsivo, pela dica. Embora eu ache redundante a cada vez que eu precisar do tutorial vir aqui deixar um comentário, farei isso para que saiba que o estou usando. Boa semana para você!

    ResponderExcluir
  69. Uma última coisa que faltou ao comentário anterior: indico seu hack para quem posso, pois embora o nativo do blogger seja "mais simples" de inserir na postagem, vejo-o como um problema para quem usa publicidade abaixo do título do post, mas oculta as mesmas na página inicial. Quando se clica no "leia mais" nativo do blogger, ele leva o leitor exatamente ao ponto onde ele havia parado a leitura, Isso significa que ele "pula" a publicidade. Nem precisamos ressaltar o problema nisso, né?

    ResponderExcluir
  70. O Comentário do ondecomeragora Me ajudou duas vezes hehe.
    Obrigado e parabéns Compulsivo

    ResponderExcluir
  71. Olá Compulsivo, gostaria de centralizar a palavra "Continue lendo >> dá uma ajuda ai por favor
    Ahh esse site é show, parabéns pelo trabalho de todos vcs!

    ResponderExcluir
  72. Queria uma ajuda, quase igual a do @AFZ...
    Mas no meu caso, queria que o "leia mais" ficasse do lado direito...
    Se puder ajudar...
    Vlw!

    ResponderExcluir
  73. Esse site/blog devia virar uma revista! Tá me ajudando MUITO! =)

    ResponderExcluir
  74. Obrigado pela informação.Seguindo o tutorial, consegui implantar esse sistema no meu blog, sem dificuldades.Valeu!

    ResponderExcluir
  75. OI.
    Eu uso o esqueleto compulsivo. Estava tudo as mil maravilhas até uns dias atras. Os posts não estavam mais resumidos. Vim aqui e utilizei as novas tags para post resumido. Ok resumiu... mas só aparece o titulo (???) mesmo tendo colocado o local de corte no text.
    Por favor.
    pode me dar uma luz para tentar corrigir a zebra?

    ResponderExcluir
  76. @Avon, crie um novo blog apenas para testes, realize o procedimento até que funcione perfeitamente no blog de testes. Só depois aplique no seu blog propriamente dito. Esta é a minha sugestão para descobrir o motivo do problema, que pode ser específico ao seu modelo de template.

    []'s
    Compulsivo

    ResponderExcluir
  77. Querido compulsivo...Grata pela ajuda. Localizei o erro no seu script. Já consertei.

    ResponderExcluir
  78. @Avon, então conta pra nós, eu faço um update no post e ajudamos outras pessoas que podem estar com o mesmo problema....

    []'s
    Compulsivo

    ResponderExcluir
  79. Olá, no Blogger, existe uma maneira mais fácil, eu não nego que usei como aqui explica, deu perfeitamente, mas as vezes tinha uma tag span antes eu me matava pra ajustar. Mas mesmo assim sempre foi ótimo! Mas, tentando melhorar, notei que no WordPress, usam Ou seja, Podemos escolher melhor ainda, e sem nos preocupar com o local, vale pra qualquer lugar. A dica que eu sempre dou é: Vá em ESCREVER, coloque esse código no lugar, depois clique em HTML, e depois clique em ESCREVER, se o código sumiu, então o local escolhido vai ser cortado. :)

    Simples né? Não sei se já tem por aqui, tava com pressa e passando. Abraços! (:

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Qual o significado da sigla DSC nos nomes de arquivos das fotos digitais?