Posts resumidos na página inicial do Blogger

Pencil

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

53 comentários

O Informador ][' disse...

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

mestreblogger disse...

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.

storm-ex.com disse...

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

olhardofuturodigital disse...

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

Compulsivo disse...

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

[]'s
Compulsivo

calango azedo disse...

é muito dificil tente resumir

Samuel disse...

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 ?

Compulsivo disse...

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

[]'s
Compulsivo

crazyseawolf disse...

Esse hack é o que uso, simples e eficiente!

blogdoinho disse...

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)

Wilcomjc disse...

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!

Senhorita disse...

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!

Vindemiatrix Almuredin disse...

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 !!

blogdozemarcos.com disse...

::: 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

Vindemiatrix Almuredin disse...

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.

semnome.net disse...

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."...

semnome.net disse...

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?

Ai meu Deus disse...

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

Gracias.

Italo André disse...

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

Compulsivo disse...

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

[]'s
Compulsivo

semnome.net disse...

@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..

appleiphonebrasilorkut disse...

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

WaltinhO' disse...

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

Duas Caras disse...

adorei de verdade
muito obrigado

Dana Malua disse...

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!

Erukusu disse...

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

endlessstream disse...

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.

Compulsivo disse...

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

[]'s
Compulsivo

blogdoinho disse...

"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

;)

DicasDigital disse...

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

betho! disse...

obg obg obg \o/
deu super certo (: (y)

Atualidades by Mairo disse...

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

spacemonkeis disse...

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.

mediskina disse...

Ficou muito legal e é muito simples de implementar!

Atualidades by Mairo disse...

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.

Soriano disse...

@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

filhosdaweb disse...

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.

blogapop disse...

Valew, cara =D
Muito boa!

wwwrenatodiversidades disse...

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

Design Tecnológico disse...

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

blogapop disse...

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

cidadedooriente disse...

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.

Pituca disse...

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?

Daiana Vasquez disse...

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!!!

Torrone disse...

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

arturcouto disse...

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!

Maria Betânia Fuller disse...

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!

Revista Sexy disse...

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 .

ministeriocesar disse...

All right!
Explicado, entendido e feito!

Daan disse...

I love Usuario Compusivo ♥

Jully ; ) disse...

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?

Iza disse...

muiiiiiiiiiiiitooo obrigada !!

DyGoOOoo disse...

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...

faça seu comentário

Leia as regras:
Todos os comentários são lidos e moderados previamente.
São publicados aqueles que respeitam as regras abaixo:

- Seu comentário precisa ter relação com o assunto do post;
- Em hipótese alguma faça propaganda de outros blogs ou sites;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- O espaço dos comentários não é lugar para pedir parceria;
- CAIXA ALTA, miguxês ou erros de ortografia não serão tolerados;
- Ofensas pessoais, ameaças e xingamentos não são permitidos;
- Não se preocupe em enviar trackbacks, os backlinks são automáticos.

Nos tutoriais:
- Leia os comentários, sua dúvida pode já estar respondida;
- Consulte o Grupo Blogspot Brasil para dúvidas específicas;
- Não fornecemos assistência técnica gratuita para o Blogger;
- Se precisa de atendimento personalizado, solicite orçamento.

OBS: Os comentários dos leitores não refletem as opiniões do blog.