quinta-feira, 10 de setembro de 2009

Jump Break – o hack “Leia mais” do Blogger

Dando continuidade às comemorações pelos 10 anos do Blogger, foi anunciado no Blogger In Draft que agora é possível resumir os posts da página inicial de forma automática, sem a necessidade de truques ou gambiarras (hack “leia mais”)

Por enquanto, essa função só está disponível para quem usa o novo editor de textos do Blogger. Para habilitá-lo, entre no painel, configurações e, no final da página, procure por configurações globais. Marque a opção editor atualizado.

habilitando o novo editor do Blogger

O resumo funciona tranquilamente nos templates disponibilizados pelo Blogger. Já os que são criados por usuários precisarão da instalação de um pequeno código.

Para quem, como eu, usa o Windows Live Writer, recomendo este hack publicado no Usuário CompulsivoPosts resumidos na página inicial do Blogger.

Usando o resumo de postagens em templates do Blogger

Quem usa o template Mínima ou os demais modelos disponibilizados pelo Blogger, deve entrar no novo editor de textos, escrever o post e escolher onde o resumo deve ser iniciado. Daí é só clicar no ícone inserir jump break.

inserir jump break

Publique o post logo a seguir. Veja, na imagem abaixo, como ficará o post publicado:Continue lendo

Para mudar a mensagem “continue lendo” por outra qualquer, entre no layout do blog e em postagens do blog, clique em editar. Procure por Texto do link da página de postagem e escreva uma frase de sua preferência.

editando a frase escolhendo a frase

Usando o resumo de postagens em templates personalizados

Para quem usa um template personalizado – que é o caso dos modelos criados por mim e pelos demais colegas – é preciso instalar um código no html do template.

Entre em layout, editar html e clique em expandir modelos de widgets. Usando a combinação Crtl+F do seu teclado, procure pelo seguinte trecho: <data:post.body/>

Logo abaixo do trecho citado, cole o seguinte código:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

No caso dos templates do Dicas Blogger, procure por <p><data:post.body/></p>. Este trecho aparecerá 2 vezes. Cole o código embaixo do segundo trecho:

instalando o código

Em alguns dos nosso templates, o hack Leia Mais do Compulsivo já encontra-se instalado e caso você queira usar o do Blogger, basta seguir esse tutorial que funcionará do mesmo jeito. Fiz diversos testes com resultados satisfatórios.

No meu blog de testes

Chique, né? Agora vamos aguardar as outras novidades \o/ #blogger10anos

**Confiram também a minha entrevista ao @CaioLausi, no Blog do Lausi ;)**

ATENÇÃO: Diversos leitores reportaram que a nova função “Leia mais” faz com que o layout do blog fique deformado, jogando as colunas para debaixo dos posts. Veja aqui a solução.


Sobre o autor: Juliana é a fundadora deste blog. Nascida em 1970, é médica e, nas horas vagas, blogueira. Também é top colaboradora do fórum de ajuda do Blogger. Twitter l Google Plus l Facebook l

80 comentários:

  1. Estava esperando ansioso por este recurso e logo irei testar com calma.

    Só ressalto o detalhe que por definição, agora o "leia mais" deixou de ser um hack (gambiarra para melhorar ou acrescentar um recurso).

    ResponderExcluir
  2. Criatiano, isso foi apenas um trocadilho e uma forma do pessoal entender do que se trata.

    ResponderExcluir
  3. Testado e aprovado

    Mais uma vez obrigado pela informação..

    Vamos aguardar mais novidades do blogger

    Abraço

    ResponderExcluir
  4. No meu blog, que tem o template personalizado, eu não precisei instalar o código no html, o Leia Mais apareceu sozinho. Talvez seja porque eu personalizei em cima do Mínima, mas vai saber!
    Em todo caso eu estou muito feliz que o Blogger adicionou essa ferramenta. Eu quase instalei o hack do Compulsivo semana passada. Sorte que me deu preguiça XD

    ResponderExcluir
  5. Pessoal, um feedback

    Instalei no meu blog, testei e tudo, mas tem postagens que se vc adicionar o Jump Break deforma o layout do blog.

    Fiquem atentos a isso

    eu uso o template Onix da Juliana

    ResponderExcluir
  6. Juliana, simplesmente demorou demais para que essa funcionalidade fosse acrescentada ao Blogger. Nem era tão importante assim mais... sempre damos um jeitinho antes do lançamento oficial.
    Mas está valendo,
    All3X

    ResponderExcluir
  7. Eu partucularmente nem vou usar esta função, já que só posto com o WLW.
    Quanto à deformidade do layout, peço que tentem retirar o antigo hack leia mais e depois me dêem retorno.

    ResponderExcluir
  8. oi blz legal hein,a parte que mais gostei deste post foi a de abilitar o novo editor...até então tinha que entrar no draft pra usa-lo.Boas vibes

    ResponderExcluir
  9. Boa tarde juliana aqui ficou beleza, porem a coluna lateral foi toda para baixo das postagens como eu resolvo isso

    ResponderExcluir
  10. @Juliana

    eu não uso o antigo hack no meu blog e mesmo assim ocorre a deformidade

    ResponderExcluir
  11. Pedro e joamot30, eu nem imagino o que possa estar ocorrendo. Vejam na última imagem do post (atualizada), que no meu blog de testes deu tudo certo. Vamos aguardar mais notícias.

    ResponderExcluir
  12. Reparei que colocando o Jump abaixo de uma certa quantidade de caracteres da certo EM ALGUNS POSTS e tbm que se o post conter muitas imagens abaixo do Jump tbm não da (em alguns posts tbm)..

    muito estranho isso

    ResponderExcluir
  13. No meu blog funcionou direitinho, agora só faltava mesmo hospedagem de Java Script no blogger...

    ResponderExcluir
  14. Como eu disse pelo Twitter, Juliana, a princípio parecia funcionar belezinha, mas de uma hora pra outra a sidebar foi jogada pra baixo da área de postagens. Isso persistiu até que eu retirei o código que resume os posts e ela voltou à posição original. Com o hack que eu já usava nunca ocorreu este tipo de problema. Poderia até achar que era imperícia minha, mas a julgar pelos outros que relataram o problema, deve ser mesmo um bug.

    ResponderExcluir
  15. O blogger tá evoluindo, isso é bom!
    Bom post! Me fez feliz! hahaha

    ResponderExcluir
  16. Juliana, funcionou perfeitamente, mais uma vez obrigado!!!

    Uma pequena dúvida: se um dia eu migrar para wordpress, o que vai acontecer com os posts que utilizei o "leia mais"? Vai ficar com um <-- more --> no meio do post?

    Abs

    ResponderExcluir
  17. Eu pensei em mudar também. Mas eu teria que mecher com os códigos e retirar o Hack que eu instalei antes (e mudar o hack das postagens antigas para o novo).

    Depois de analizar, vi que dava no mesmo ter o hack ou o código do blogger. Talvez eu tenha que mudar no futuro.

    Abraços Juliana, admiro seu trabalho!

    ResponderExcluir
  18. Juliana!

    Vamos ver se tu tens a resposta. Testei em vários templates, em três blogs que tenho, inclusive num deles com um template Minima Black, do próprio blogger.

    O que acontece é o seguinte: o hack funciona perfeitamente, inclusive em postagens cheias de imagens, que é as que gosto muito.

    Só que a segunda coluna, ou a segunda e terceira caso o template tenha três colunas, vão parar debaixo da postagem.

    Já tentei de tudo, fucei aqui, fucei alí e nada. Se tirar o tag ---more!---, volta ao normal, mas se deixar ela fica assim.

    Chegou a ver isso algum teste seu?

    Ah, meu editor já está atualizado. E os testes que fiz foi com postagens já publicadas.

    ResponderExcluir
  19. comigo também está acontecendo da barra lateral ser mandada para o final do blog abaixo de todas as postagens, mas isso só ocorre na página principal do blog aonde eu usei o 'Jump Break', nas páginas seguintes e nos posts após o Junp Breack o layout fica do jeito certo....

    ResponderExcluir
  20. JV, não saberia te responder

    bolichodogremio, várias pessoas estão relatando o mesmo problema. O jeito é aguardarmos notícias do Blogger.

    ResponderExcluir
  21. eu estou ancioso mesmo é por um sistema de comentários decente e quem sabe algo relacionado a melhoramento de seo, quem sabe o blogger não lance um sistema de tags =D

    ResponderExcluir
  22. Hugo, seria ótimo! É o que eu também estou aguardando.

    ResponderExcluir
  23. @Hugo

    É exatamente isso o que eu espero desde quando eu entrei para o blogger

    o blogger tem muitas vantagens, mas o sistema de comentários ainda é muito atrasado

    ResponderExcluir
  24. A alegria durou pouco. A sidebar foi deslocada para o final do template.
    Parece que a próxima novidade é a página estática.
    Será?
    Abs
    Sumy

    ResponderExcluir
  25. Juliana,
    assim como o Pedro, no meu blog-teste deu erro mesmo e toda a leteral foi parar no rodapé. Ficou uma bomba, mas testei no meu blog mesmo em 1 (uma) única postagem e deu certo. :p

    ResponderExcluir
  26. Vamos lá.

    Eu usava o post resumido do Usuário Compulsivo e retirei para ficar com o novo recurso do Blogger.
    Aconteceu de a sidebar escorregar para baixo das postagens, como alguns disseram aqui. Então encontrei essas dicas da ajuda do Blogger mesmo.

    Depois de fazer isso, as colunas voltaram ao normal, mas dependendo da postagem em que uso o recurso, a sidebar volta lá para baixo de novo. Problema ainda não resolvido.

    No fundo, angariei mais uma complicação que agora não sei resolver. Há um branco entre o último post e o footer! Uso o template Elegance, da Juliana.

    Um abraço,
    Lucas

    ResponderExcluir
  27. Estou meio decepcionado, Juliana.No meu a função existe, mas não aparece escrito Leia Mais. Se você puder me ajudar serei eternamente grato.

    ResponderExcluir
  28. Juliana!

    Acabei de fazer no template do COmpulsivo, e não deu certo. Continua com a sidebar debaixo nas postagens. Mas que coisa estranha, já que no editor tudo está direitinho em seu lugar!

    ResponderExcluir
  29. Ando tão na correria, que não sabia que com esse editor atualizado, poderia colocar o "leia mais".

    Obrigada! =)

    ResponderExcluir
  30. Juliana, eu uso o hack leia mais do Templates Para Você que deu a pouco tempo, mas não vou usar o do blogger, como é novo, vai ter muitos bugs

    ResponderExcluir
  31. Juliana. Acabei da fazer o que vc recomenda na "Atualização" mas dai ocorre outra deformidade. Ele joga a ultima parte da sidebar do blog la para baixo. As vezes quando recarregamos a pagina, volta ao normal, mas é só recarregar novamente que ocorre novamente a deformidade.

    Ainda não foi dessa vez. Vamos esperar por mais soluções.

    Abraço

    ResponderExcluir
  32. A correção que o Vagabundia sugeriu não funcionou no meu blog, o problema continua.....

    ResponderExcluir
  33. Juliana, depois da uma olhadinha no e-mail que lhe enviei através do formulário de contato do DB

    Se trata de uma possível solução (funcionou para mim) para o deslocamento e outros problemas no layout do blog com a nova ferramenta "Jump Break"

    Ps.: Não precisa aprovar esse comentário

    ResponderExcluir
  34. O problema da sidebar continou no meu blog, mesmo com a atualização!

    Espero respostas!!

    ResponderExcluir
  35. theloreanaveia, eu também espero respostas!

    ResponderExcluir
  36. não funcionou no meu!O que fazer?Meu blog tah parecendo o mostro godizila!

    ResponderExcluir
  37. Kewin ler este post vai bem:
    http://dicasblogger.blogspot.com/2009/09/problema-com-o-jump-break.html

    ResponderExcluir
  38. Até que em fim Muito obrigado mesmo Juliana!

    ResponderExcluir
  39. Atenção
    Testado é aprovado .

    Só tem um problema os assinantes do meu feeds estão recebendo os artigos todos desconfigurados.

    Verifiquem os seus feed e depois comente aqui.

    abs a todos

    ResponderExcluir
  40. Só uma dica, caso queria usar em qualquer outro editor esse "hack" do blogger basta colocar o comentário:
    "!-- more --"(substituir as aspas por <>) aonde se quer ocultar que o blogger posta com o hack.

    Abraços

    ResponderExcluir
  41. Pessoal eu fiz conforme descrito nas imagens acima e ficou beleza, não precisei editar o html e nem usar os escripts.Basta seguir as imagens.

    ResponderExcluir
  42. Obrigado por mais uma ajuda.

    Abraços!

    ResponderExcluir
  43. Bom eu em um dos templates que tentei instalar a sidebar estava indo para o footer da pagina, tentei instalar o JV mais mesmo assim não corrigiu.

    ResponderExcluir
  44. Consegui arrumar após apagar as divs dos pots,dae funcionou normalmente sem utlizar qualquer script.

    ResponderExcluir
  45. Caramba e eu me matando em fazer hacks ! Funfo de boa...

    Obrigado

    ResponderExcluir
  46. Olá Juliana!
    Comentando apenas pra avisar que testei e o resultado também foi satisfatório.
    Em um blog de teste, usando o template Dicas blogger 1.0, deu tudo certo. Apenas uma observação de que o trecho " [p] [data:post.body/][/p]" aparece apenas uma vez no hmtl desse template. Ou seja, de forma diferente do seu print, talvez porque ele tenha sido criado pelo Paulo né? Mas, mesmo assim, aparecem as tags "[p]"

    Obs. utilizei "[" e "]" por que o formulário de contato não aceita tags.
    Beijo

    ResponderExcluir
  47. Olá,
    sem querer eu usei isso ai.
    Agora minha sidebar ta lá em baixo já troquei de template várias e várias vezes mas ela continua em baixo o que eu tenho que fazer.
    obs: quando eu olho o blog inteiro a sidebar ta lá em baixo.
    Se eu visualizar post por post ela volta pro lugar.
    Porfavor me ajudem to triste de ver meu blog assim.
    :link http://evanescencetrh.blogspot.com

    ResponderExcluir
  48. Aqui funfo de boa em um Template personalizado

    Nem precisei mudar nada no HTML =D

    ResponderExcluir
  49. Obrigado Juliana, no meu blog funcionou legal!! ;-)

    Segue link: http://www.computacao-em-acao.com/

    \o/ Abcs.!

    Ricardo Costa
    Computação em Ação

    ResponderExcluir
  50. Desculpe, mas pode me ajudar?
    Quando uso esse truque, a sidebar do meu blog sai da lateral e vai para o final do site... O que está acontecendo? Fiz algo errado?

    Grata!

    ResponderExcluir
  51. muito obrigada, foi ótimo, deu certinho!

    ResponderExcluir
  52. Adorei! usei e era tudo o que eu queria para deixar a home do meu blog mais leve!
    obrigada pela dica didática! E olhe que eu tive que alterar o layout tb, pois está personalizado. Enfim, obrigada! Boa sorte!

    ResponderExcluir
  53. Adorei também! Tenho só uma dúvida: pq aparecem 2 leia mais nos meus posts? será que poderia me ajudar (paula_rached@yahoo.com.br)
    obrigada!!!

    ResponderExcluir
  54. E eu passava tanto trabalho...

    Show de bola!

    Grande abraço Mãe Juliana!

    ResponderExcluir
  55. Show de bola!! Gambiaras nunca mais... Super post, nota 10.

    ResponderExcluir
  56. Valeu, funcionou mesmo, adoro este site e sempre aprendo coisas novas por aqui!

    ResponderExcluir
  57. Ju!!!!

    como sempre vc salvou meu bloginho!!! brigaduuu!!!

    ResponderExcluir
  58. Você parece que adivinha meus pensamentos. Parece que tudo o que eu preciso encontro aqui rsrsr
    Muito obrigado Juliana. Sou um ouvinte dos seus podcasts também. Adorei a entrevista com o Compulsivo e com a Ariane. Você leva jeito mesmo! rsrsr. Pq parou de entrevistar? Vê se volta!

    Abraço!

    ResponderExcluir
  59. Olaá juliana, tenho a msm duvida de alguem ai em cima. Por que aparecem 2 Continuar lendo? Fica feio isso, se puder me ajudar serei mto grato!

    Obrigado

    ResponderExcluir
  60. putz mano eu precisava disso perdi a cabeça procurando vlw msm

    ResponderExcluir
  61. Muito bem explicado, já havia tentado através de outros sites, mas nenhuma dica dava certo... Para quem é iniciante...rs Muito obrigada!!

    ResponderExcluir
  62. Não consigo colocar isso no blog (designer). Nunca dá certo por qualquer método. Queria o jump break do blogger, mas não funciona. Dá pra entender? Estranho!...

    ResponderExcluir
  63. Valeu pela dica, já implentei em meu blog, foi fácil, sua explicação foi clara e objetiva.

    Valeu mesmo.

    ResponderExcluir
  64. PARABÉNS POR ESTE POST!!!
    estava procurando isso há tempo para o meu blog e só aqui encontrei. Olha q curioso, descobri isso através de um comentário de usuário q postou esse link, justamente quando procurava por este recurso! OBRIGA MIL VEZES OBRIGADA! agora deixou de ser hack!!!!!!!!!!! q coisa boa!

    ResponderExcluir
  65. Caramba eu estava querendo isso a tempos, pq meu blog é editado, não sabe como eu estou agradecido pelo tutorial nota 1,000, parabêns!!!

    ResponderExcluir
  66. Parabéns pelo post, contenue assim...
    =D

    [Www.CheatsPCBrasil.blogspot.com]

    ResponderExcluir
  67. Oh Artigo santo

    Cara vlw mesmo você me salvou, eu quiz ser o maximo e fazer uma template do zero e ekeci muiiiitas coisase so estava faltando isso, vlw mesmo

    ResponderExcluir
  68. valeu
    foi muito produtiva a dica que obtive aqui.
    aproveito pra deixar aqui o endereço do meu blog para a galera visitar e seguir se gostarem. ok
    www.brilhonegro.blogspot.com
    um abraço

    ResponderExcluir
  69. Obrigado!
    Já estou usando no meu blog.

    ResponderExcluir
  70. Mais uma vez o Dicas Blogger me salva! kkkkk

    Muito obrigada,

    Galeria das ideias!

    ResponderExcluir
  71. perfeito cara,prourei muito por isso.
    valew!!

    ResponderExcluir
  72. Ola parabéns pela postagem, muito direta e objetiva estava procurando por isso. valeu dicas blogger



    http://embuscadoentendimento.blogspot.com/

    ResponderExcluir
  73. Eu acho que o Blogger já deve ter corrigido este bug, pois eu postei usando o recurso do Jump Break e não aconteceu de desconfigurar o layout do meu blog.

    ResponderExcluir
  74. Olá, eu fiz como você ensinou e não deu certo. Você pode dar uma olhada em meu blog, por favor, para me indicar qual processo correto devo seguir. Obrigada

    ResponderExcluir
  75. POXA! Valeu cara essa ferramenta é muito boa.
    Graças a você ficou fácil fazer kk
    Obrigada!

    ResponderExcluir
  76. Cara o meu está em ingles (More info) como ponho em portugues?obrigada

    ResponderExcluir
    Respostas
    1. Olá,

      Procure dentro do código html a expressão 'more info' e substitua por 'Leia mais'. Mas se certifique que está dentro do código desse hack!!!

      Excluir

Os comentários passam por um sistema de moderação, ou seja, eles são lidos por nós antes de serem publicados. Não serão aprovados os comentários:
- não relacionados ao tema do post;
- com pedidos de parceria;
- com propagandas (spam);
- com link para divulgar seu blog;
- com palavrões ou ofensas a pessoas e marcas;
ATENÇÃO: comentários com links não serão aprovados