r e a d e r

Acompanhe meus comentários através do Reader

08 janeiro 2008

Resumo de post expansível

Desde que escrevo no Beira Mar venho alterando alguns detalhes visuais do site para agradar mais aos nossos olhos - os meus e os seus -. Foram modificações sutis, como nova diagramação ou alteração de alguns menus laterais do blog.

Ja faz um tempo que quero implantar por aqui os resumos de post expansível ou expandable post summaries. Alguns podem não saber o que é, mas a maioria ja clicou em um! Com essa ferramenta podemos exibir algumas das primeiras linhas do post na página principal do blog e colocar um link para que o leitor possa abrir o post completo, caso tenha interesse. Assim o blog fica menos poluído e a navegação não fica prejudicada pelos textos mais longos.

Criei dois exemplos para explicar melhor essa ferramenta:

  1. Nesse todo o texto do post é exibido na página principal do blog (click aqui)
  2. Agora apenas o começo do texto do post é exibido na página principal do blog. O texto completo aparece apenas quando você clica em Clique aqui para exibir o texto completo (click aqui).

Nesse post vou explicar de forma simples e clara como implantar essa função em seu Blogger.

Observação: Esses passos funcionam para quem usa um dos novos modelos do Blogger. Quem usa o modelo Clássico pode ter de adaptar os comandos abaixo. Nesse caso recomendo usar os links das fontes de pesquisa, no final do post, para ter mais informações.

Passo 1. Para começar, essa função precisa ser configurada no HTML do seu blog. Para editar o HTML clique em Modelo e em seguida Editar HTML. Não esqueça de habilitar a opção Expandir modelos de widgets, conforme a imagem abaixo. Antes de editar o código HTML do seu blogger recomendo que você faça uma cópia do html atual clicando em Baixar modelo completo. Caso você tenha algum problema com as alterações basta selecionar o arquivo salvo no seu computador e clicar em Fazer upload para restaurar todas as configurações.


Passo 2. Procure no código html o texto </head>. Você deve copiar e colar o código abaixo entre <]]>/b:skin> e </head>:

<!-- início do texto expansivel by rbuzelli.blogspot.com -->

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

<!-- fim do texto expansivel by rbuzelli.blogspot.com -->


Com essa primeira alteração o código html deve ficar assim:

Passo 3. Agora procure no código html o texto <data:post.body/>. Copie e cole o texto abaixo logo abaixo dele:

<!-- inicio da alteração para texto expansivel by rbuzelli.blogspot.com -->
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Clique aqui para ler o texto completo.</a>
</b:if>
<!-- fim da alteração para texto expansivel by rbuzelli.blogspot.com -->


Fazendo essa alteração o texto deve ficar assim:

Observação: Nessa hora você pode fazer uma alteração! No código acima, o texto Clique aqui para ler o texto completo. é a frase que vai aparecer sempre que o seu post for publicado usando o resumo de post expansível. Caso você queira mudar essa frase basta alterar o texto! Por exemplo, você pode usar o código abaixo para usar a frase Se quiser ler mais, clique aqui!:

<!-- inicio da alteração para texto expansivel by rbuzelli.blogspot.com -->
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Se quiser ler mais, clique aqui!</a>
</b:if>
<!-- fim da alteração para texto expansivel by rbuzelli.blogspot.com -->


Passo 4. Clique em SALVAR MODELO e as alterações no código estão prontas! Não foi tão difícil, foi? Agora vamos ao mais fácil, um pequeno código que precisa ser usado em cada novo post que você criar: <span class="fullpost"></span>
.

Para cortar o texto dos seus post no ponto que você quer será preciso usar o código acima da seguinte forma:

Essa parte do texto eu quero exibir na página principal do meu blog.

<span class="fullpost">Ja essa parte do texto só será exibida quando a pessoa visualizar o post completo, clicando no link no final do texto.</span>.

Quem for ler o seu blog verá o texto abaixo na página principal:

Essa parte do texto eu quero exibir na página principal do meu blog.

Clique aqui para ler o texto completo.

Quando clicar no link ou entrar direto no post, ao invés de navegar em sua página principal, ele verá:

Essa parte do texto eu quero exibir na página principal do meu blog.

Ja essa parte do texto só será exibida quando a pessoa visualizar o post completo, clicando no link no final do texto

Com isso você está pronto para escrever seus posts expansíveis! Só falta agora a dica de como automatizar seus blog de forma a todos os seus próximos posts terem o código <span class="fullpost"></span> incluso.

Passo 5. Clique em Configurações, selecione Formatação e na lista de opções que você terá procure Modelo de postagem. O modelo de postagem é um campo onde podemos digitar um texto que será incluído em todos os novos posts. No campo em branco copie e cole o código abaixo:

.

<span class="fullpost">..</span>


O seu modelo de postagem deverá ficar conforme a imagem abaixo:


Agora sempre que você criar um nos post basta substituir "." pelo texto que deverá ser lido na página principal ".." pelo restante do texto.


POST ATUALIZADO
dia 09|01|09 . 08:20.12:57

Passo 6.Com os passos acima o código causa um efeito colateral no blog. O texto Clique aqui para ler o texto completo aparece no final de todos os post, mesmo os que foram publicados antes da alteração. Eu havia colocado uma observação do começo desse tutorial detalhando o problema, mas agora encontrei uma solução!

Sempre que você quiser publicar um post sem usar o resumo expansível basta adiconar no final do texto o código:

<span class="fullpost"><div></span></div>.

Para facilitar meu trabalho, atualizei meu modelo de postagem (ver o passo 5) com o código abaixo:

.

<span class="fullpost">..<div></span></div>


Dessa forma eu posso apagar o ".." quando quero escrever um texto curto e a mensagem do texto expansível não aparece. Quando quero dividir o post eu apenas apago <div></div> e substituo ".." pela segunda parte do texto.

The End

Detalhei cada parte do processo para não deixar dúvidas. Quando você for colocar em prática verá que é mais simples do que parece! Qualquer dúvida ou sugestão, basta deixar um comentário no tópico. Espero que seja tão útil pra você quanto foi pra mim!


FONTES DE PESQUISA
Minha primeira fonte de consulta foi o help do próprio Blogger (em português e em inglês). Só que as informações dele não são muito claras e só me ajudaram com as palavras chave que eu usei para pesquisar no Google. Com elas eu cheguei em dois blogs, Vento Sueste e Dummies Guide To Google Blogger Beta.

Existe uma outra opção para adaptar textos longos ao seu site: a ferramenta exibir/ocultar textos ou show/hide links , também explicada na Ajuda do Blogger. Como você pode ver aqui, apesar do bom humor de quem explicou o código ficou algumas lacunas. Tentarei escrever em os detalhes dessa outra ferramenta.

35 comentários:

ViOxX disse...

Otimo artigo...
parabems nobre... indiquei seu artigo pelo meu blog...


fuudeu.blogspot.com !!!

Miguel disse...

Valew, gostei muito do post..

ate mais

Aleco Pinder disse...

Cara, fiz tudo certinho, e até aparecer a primeira parte do post e o "Continue lendo" aparece...

mas quando eu clico no "Continue lendo", ele abre o que seria a continuação do post, mas não aparece o texto que escrevi e era pra aparecer aqui!!

Oq será q fiz de errado?

Abraços.

Renato Fernandes disse...

Muito obrigado
Parabéns fiquei dias atrás desse código e vc resolveu

Valeu

vinicius disse...

MUITO OBRIGADO PELA DICA DE COMO MOSTRAR SÓ O RESUMO DA POSTAGEM, FIQUEI UM TEMPO IMENSO PROCURANDO NA NET UMA FORMA DE ADICIONAR ESSA FUNÇÃO NO MEU BLOG, MAS NENHUM SITE ME EXPLICOU DE FORMA CLARA E CORRETA, MAS COM SUA EXPLICAÇÃO ESTA FUNCIONANDO TUDO SERTINHO.

Ana Teresa disse...

Muito obrigada, seu tutorial é perfeito e aqui deu tudo certinho!

Rogério Anjo disse...

Bom poder ajudar! Volte sempre ;)

Lucas disse...

Opa, mesmo com o post atualizado no meu fica aparecendo Leia Mais em todos os posts, poderia me dar uma ajuda?
Abraço

Liliane Schneider disse...

Idem ao Lucas... Continua aparecendo me todos "leia mais".
E agora? Abs, Lili

Rogério Anjo disse...

Liliane,
Imagino que seja o passo 6! Quando você coloca {span class="fullpost"}{div}{/span}{/div> e depois edita o texto o blogger muda, deixando {span class="fullpost"}{div}{/div}{/span}{/code}. Assim aparece o Leia mais no final do texto. Olhei todas as mensagens do teu blog e em todas tinha mais texto depois do link, dai não consegui ver se é esse o teu problema. Se quiser, publique um texto menor e me avisa por aqui, vou dar uma olhada, ok? =)

Quanto ao Lucas, não consigo ajudá-lo pois não sei qual o blogger dele, não tenho como olhar as mensagens para tentar ajudar.

Obs: Onde tem { ou } é na verdade < ou >
Até mais!

JORGE ALBERTO disse...

Amigo, não sou de deixar comentários por aí, mas quero muito te agradecer pela postagem pois me ajudou demais a conseguir resumir os posts. Já há uma semana tentava pelo Google, mas sempre me confundia, valeu mesmo pela dica. Abraços

Rogério Anjo disse...

Jorge,

Que bom que gostou! Espero ter mais tempo para publicar outras descobertas, mas fico muito feliz em ter um texto que seja util para outros bloggers! Abraço

Antonio Ugá disse...

Rapaz muito massa seu artigo, valeu mesmo

Rogério Anjo disse...

Antonio,
Que bom que gostou! Disponha, meu caro!
=)

Antonio Ugá disse...

Rogério tô utilizando o que você ensinou frequentemente, mas as vezes a distância entre o fim do tópico e o clique para ampliar é consideravelmente grande, sabe uma solução para isso?

Antonio Ugá disse...
Este comentário foi removido pelo autor.
Rodrigo disse...

Cara, eu não estou conseguindo tirar o "leia mais" das postagens já existentes

se não for demais, vc poderia explcar em forma de imagem? Vlw

Rodrigo
{d}efeitos especiais

Walner Mamede Júnior disse...

Aí,
Seu hack ajudou bastante. O que eu havia conseguido no Blosgue.com tava dando errado: não encontrava em meu template algumas linhas de comando que eles indicavam para substituir. Indiquei seu blog lá. Passa por lá e dá umas dicas pro pessoal.
Valeu

Alexander Bastos disse...

.
valew, foi o único código que deu certo para o meu template...
.

leandro´sS disse...

Rogério, muitissimo obrigado pela dica!

eu tava procurando uma solução pra esse "leia mais" em todos os posts.

com sua ajuda, consegui! um puta abraço, valeu.

Rogério Buzelli disse...

Leandro,

Fico muito feliz em saber que te ajudei! Abraço!

Pietro Henrique disse...

Rogério... o post é muito bom e explica muito bem... mas eu ainda continuo com um problema.. eu não consigo tirar o continue lendo dos outros posts

Rodrigo disse...

Rogério, show de bola! segui certinho os passos, tudo ok! mas nos posts que eu não resumi ainda aparecem o "continuar lendo" sendo que ao final de cada um eu utilizei o seu esquema...tem como ajudar? Abraço!!!

Rogério Buzelli disse...

Bom dia / tarde / noite!

Para quem teve o problema do "continuar lendo" aparecer em todas as mensagens, ficam dois pontos:

1. Essa alteração faz a mensagem que você definiu aparecer em todas as mensagens ja postadas, portanto você precisa editá-las para que a mensagem não seja exibida.

2. Outro ponto importante é que o Blogspot tenta corrigir erros de html enquanto você cria seu post! Se você insere o código span class="fullpost" div /span /div no final do seu texto e clica na aba Escrever para ver o resultado final do seu post o Blog automaticamente altera o código para span class="fullpost" div /div /span - obs: os sinais crescente e decrescente foram retirados dessa mensagens, mas devem ser utilizados como explicado no post -, fazendo com que a mensagem seja exibida. Portanto lembre-se de inserir essa alteração depois que terminar o post, clicando em Publicar Postagem logo em seguida.

Espero que isso ajude!

Camilla disse...

Prabéns *-*
o tutorial tá perfeito, super fácil de entender.
Muito obrigada pela ajuda *-* beijos ;**

allgoritmos disse...

Apanhei um pouco no começo mas consegui usar.

Mas quando troquei de template não consegui mais pois quando clico no continuo lendo só aparece o título na outra página...

alguém me ajuda???

Neto8 disse...

cara
alguns dos meus posts ficam com o continue lendo só no final dele.
Eu coloco:

O que vai aparecer na página inicial aqui
< span class="fullpost" > (sem espaços)
O resto que vai aparecer só depois de clicar o botão "Continue Lendo".
< /span > (sem espaços)

aí na página inicial fica:

O que vai aparecer na página inicial aqui
O resto que vai aparecer só depois de clicar o botão "Continue Lendo".
Clique aqui pra continuar lendo...q saco eu não sei o q eu faço mais.
e o pior é q são vários tutoriais diferentes mandando colocar códigos diferentes e coisas diferentes fora alguns códigos que não tem eu alguns posts, por exemplo, o meu tem:
< div class='post-body entry-content' > (sem espaços)
em vez de só
< div class='post-body' > (sem espaços)
e tem
< data:post.body/ > (sem espaços)
em vez de
< p > < data:post.body/ > < /p > (sem espaços)

ajuda!

Ju Brasileiro disse...

texto mto bom! eu tentei esse tutorial em 3 blogs diferentes, mas só funcinou com o seu tutorial! muito obrigada!!!!

Rogério Buzelli disse...

Que bom que você gostou, Ju! Divulgue o link, espero ajudar outras pessoas!
=)

LyssinhuHackerR'~ disse...

kra deu tudo certo aki... so tem um PRO
no meu blog tem BOTÕES PRA DOWNLOAD..

e esse codigo ae so nao esconde o botãe de download..
funfa direitim, so a poha do botao q fica aparecendo =/
oq eu faço??

Rogério Buzelli disse...

Lyssin,
Estive dando uma olhada no seu site. Teoricamente o código tem de ser colocado imediatamente antes da imagem que você usa como botão de download, deve funcionar. Veja onde esse botão está sendo inserido.

LyssinhuHackerR'~ disse...

Kra eu ja fiz fiz isso eu coloco antes, ai esconde toudo menos o botão, sendo q eu to fazendo tudo certo, vc deve ter visto no meu site tudo aparecendo ainda, é pq so vou colocar esse codig mesmo quando ele resumi tudo, nao queruh q fiquei aparecendo o botão de download =/

mais e ae outra dica??
ta ae meu site:
http://www.ldownloads.com.br/

vlw's

Rogério Buzelli disse...

Lyssin,
Ja aconteceu algo parecido com partes de mensagens antigas no meu blog! Nesses casos o culpado era o </span>, que é automaticamente inserido quando você faz algumas mudanças no texto, como fonte ou parágrafo.

Precisei ler todo o código para tirar o </span> que estava no lugar errado, depois disso tudo funcionou normalmente!

LyssinhuHackerR'~ disse...

Quer dizer q o "span" pode esta num lugar errado dentro do HTML do site, ou esta num errado do proprio post?

no post acho q nao tha nao, coloco tudo certim... agora se tive errado no HTML ae eu ja num sei ; Pois diz ae onde tuh coloco esse span ae pfv!

Se der disponibiliza o q tuh usa ae pra gente ;D

vlw vey ;D

Rogério Buzelli disse...

Pode estar num lugar errado dentro do próprio post! Mesmo que você adicione o span nos lugares certos a própria codificação do Blogger adiciona o span em alguns lugares do código, com outras funções, mas ja aconteceu que o span automático do Blogger acabou criando problema em alguns posts e fazia a parte errada do texto, que eu queria que ficasse oculta, aparecesse.

A dica que eu posso te dar é pra criar um post do zero, publicar como teste e verificar, com o mínimo de código, se ele está funcionando. Caso esteja, adicione aos poucos as imagens, texto, e vá salvando até localizar onde o problema está acontecendo.