Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Configurar Postagens Vanessa S.

Recurso “Leia Mais” do próprio Blogger

Umas das recentes novidades disponibilizadas pelo Blogger, é o resumo de postagens automático como recurso do próprio Blogger. O que antes era necessário inserir um hack para resumir postagens automaticamente, através de códigos javascript no html do template, agora não há mais necessidade.
Com esta novidade, ativar resumo de postagens no blogger ficou mais fácil, mais leve e totalmente customizável, já que agora você decide o que quer que fique oculto nas suas postagens ou não.
Para aqueles que possuem templates novos, este recurso já vem ativado, basta apenas configurá-lo para que ele funcione, mas também é possível ativar o recurso em templates antigos, e é o que vou explicar hoje aqui neste tutorial, como ativar o recurso nos dois casos.
Seguindo os passos corretamente, você ativa o seu “Leia Mais” do blogger, sem complicações!

1º passo – ativar o Jump Break na postagem do Blogger:

Crie sua postagem normalmente, escreva seu texto.
1. Clique no modo “escrever” no editor de postagem para ativar a “toolbar” completa.
2. Clique no ícone “insert jump break” e ative o ‘jump Break’ na postagem, separando a parte que você quer ocultar na home.

(Veja imagem demonstrativa)

2º passo – personalizar a frase no link

Por padrão, a frase do link do resumo é “Mais informações”, mas você pode altera-la para “Leia Mais”, ou “Continue Lendo”. Personalize a frase como preferir.
Acesse o painel do blogger, clique no menu “layout”, em “postagens do blog”, clique no link “editar” e altere a frase na parte indicada na imagem abaixo:

 

3º passo – Personalizar o link do “Leia Mais”

Personalizar o link do “Leia Mais” que vai aparecer nas postagens, aplicando seus estilos.
Entre no menu “modelo”, clique em “editar html” e procure pela tag ]]></b:skin>
Cole o seguinte código CSS acima desta tag:


.jump-link {
text-align: right; /*Alinhamento do link "Leia mais"*/
font-size: 20px; /*Tamanho da fonte*/
font-weigth: bold;
margin: 5px 10px 5px 0px;
}
.jump-link a:link, .jump-link a:visited { /*Estilo do link ativo e visitado*/
color: #fff; /*Edite cor do link*/
text-decoration: none;
}
.jump-link a:hover { /*Estilo do link qdo passa mouse em cima*/
color: #8080cf; /*Edite cor do link*/
text-decoration: none;
}

Caso você utilizar o editor de textos do blogger no modo html e não no modo “escrever”, há uma maneira de ativar seu jump Break também,basta você incluir a tag:
<!– more –>

Antes da parte que você quer que fique oculta na sua postagem.

Atenção: o novo recurso do blogger só está habilitado para templates novos. Se você seguir todos os passos e ainda assim não funcionar, veja abaixo como ativar o recurso em templates antigos.

Ativando o recurso “Leia Mais” em templates antigos:

Vá no menu “modelo, acesse o botão para edição de html do seu blog, marque a caixinha “expandir modelos de widgts” e Procure pela linha:


<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

E cole o código a seguir, logo ABAIXO dela:


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

Prontinho.Agora é só salvar!
Siga as mesmas orientações postadas no tutorial acima, referentes a aplicação de estilos etc.

Substituir o link “Leia Mais” por uma imagem:

Alguns leitores me perguntaram como substituir o link do “Leia Mais” por uma imagem, tal qual podemos fazer no hack que utiliza script.
É muito simples.
Entre na edição HTML do seu template, clique em “expandir modelos de widgets” e procure por:


<data:post.jumpText/>

SUBSTITUA esta tag por esta outra:


<img src='URL-DA-SUA-IMAGEM' />

Visualize, se estiver tudo certinho, salve!

[alerta] Lembrando que, o resumo só será aplicado nas postagens que você ativar o jump break. Caso você queira que o resumo apareça não somente nos posts da home, mas também nas páginas de arquivos e marcadores, você terá que editar todos os seus posts, um a um, manualmente. Será necessário que você ative o jump break em todos os seus artigos![/alerta]

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

36 Comentários

  1. Gustavo disse:

    Conseguiii , obrigadoooooo

  2. Niihzinha disse:

    Noossa ameiii!! Obrigada . ajudouuuu mtmtmtmt eu queria saber como fazia pra colocar e agora consegui!! bjooes

  3. Elivyhe disse:

    nao conssigir 🙁

  4. phellipe disse:

    adorei muito bom otimo

  5. Franciele Câmara disse:

    Oi, só uma pergunta, o que eu faço se ficar dois leia mais?
    No meu ficou?

  6. Paulo Cezar disse:

    Até que enfim uma boa explicação, parabéns ^^

  7. Paulinho disse:

    muito bo parabens tão simples obrigado

  8. Thaylord disse:

    Gostei vlw

  9. Hélio disse:

    Sua dica me salvou, na boa você merece um prêmio.

    Muito obrigado, sua linda!

  10. Naruto disse:

    Ficou excelente Clau ,,, personalizei com uma imagem e ficou coisa do outro mundo … 😀

  11. Bristol disse:

    Clau, veja no meu blog: http://blogcdttestes.blogspot.com/
    Acontece o seguinte o 'leia mais' fica desalinhado entre dois posts.

  12. Carlos Augusto disse:

    Consegui!!!!!!!!! Era só colocar a opção "Modelos antigos" Mais cuidado você vai perder seu modelo atual! depois é só refazer.

  13. .:: Clau ::. disse:

    Andrea
    No tutorial já está explicado onde vc deve colar o código do 4º passo. Se não deu certo ai, é pq pode ser algo relacionado a seu template.

    godmasterdownload
    Vc deve ativar o Jump Break em todas as postagens se quiser que apareça nas demais.

    Carlos Augusto
    Vc deve ter feito algo errado, entretanto, alguns recursos variam de template para template. Sendo assim, não tenho como te ajudar.

    • guilherme disse:

      Clau eu fiz isso e deu mas so na pagina inicial
      nas outras paginas nao consigo postar usando o recurso leia mais, me ajuda ai. Como faz pra usar o recurso leia mais nas outras paginas?

      • Vanessa disse:

        Guilherme,
        o resumo só será aplicado nas postagens que você ativar o jump break. Se quiser que apareça em outros posts, será necessário que você ative o jump break em todos os seus artigos.

  14. Carlos Augusto disse:

    Oi Clau, Td bem?
    Estou tendo problemas para aplicar o "Substituir o link "Leia Mais" por uma imagem:" Dá um erro:
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "body" must be terminated by the matching end-tag "".

  15. godmasterdownload disse:

    deu certo mais o ruin que é só em uma postagen dai e mau:(

  16. Andrea disse:

    Oi Clau!
    Estou tentando aplicar este recurso no meu blog e não consigo, o código do 4º passo não está com as tags fechadas, e dá erro. Pelo pouco que entendo de html, tentei fechar mas continuou com o erro XML.
    Uma dúvida: este código do 4º passo eu coloco no html da postagem ou do blog? – (caso sim, é em: design – editar html – clicar em expandir modelos ou não?)
    Se puder me ajudar, agradeço.
    Estou procurando e tentando este código há meses e NENHUM dá certo, não sei mais o que fazer.
    Obrigada!
    Andrea.

  17. Lucas Hb disse:

    Clau,não aparece o leia mais

  18. ::Clau:: disse:

    Bauru:
    Que bom que deu certo.E obrigada pelo comentário, bom ver vc por aqui =)

  19. Bauru disse:

    Apesar de ter de adaptar o que mandou, pois não encaixava no lugar indicado, deu tudo certo, Clau. Valeu pela dica que usei agora lá no Blog do Bauru. Beijo.

  20. Mia Delessi disse:

    Obrigada, estava a procura desta informação a séculos e finalmente tenho o meu blog personalizado!

    OBRIGADA

  21. Natália R. disse:

    Como fazer um leia mais especifico????? *-* Ajudaa…

    http://bloggitando.blogspot.com

  22. ::Clau:: disse:

    @xTudodownloads:
    Vc seguiu o passo no tutorial que ensina a Ativar o recurso "Leia Mais" em templates antigos?
    É necessário seguir este passo,senão não vai aparecer mesmo.

  23. xTudoDownloads disse:

    Oi, olha eu mudei a forma de postagens para Atualizado mais nao aparece essa opção jump brake
    como faço?

  24. ::Clau:: disse:

    @MaÐ:
    Vou tentar criar um tutorial sim. Vou fazer uns testes e publico.
    Obrigada pelo comentário e pela visita.

  25. MaÐ disse:

    Olá eu fiquei com a mesma dúvida do amigo PHelipe ali em cima, a vossa senhoria podia fazer um totorial de como colocar imagem clicável no lugar do jump break? Obrigado.
    ps.: adoro seu site

  26. Maspnet disse:

    Valeu pela dica!
    Abraços!

  27. PHelipe disse:

    Oi, Clau!
    Ó eu denovo 😀
    Então, muito obrigado pela atenção e ajuda. Pra ser honesto eu nem esperava ser respondido (como quase nunca sou nos outros blogs. Parabéns pela disposição em ajudar.

    Agora a minha questão. Fiz o que você sugeriu e deu certo! Mas tem um porém, a imagem não ficou "clicável" como era a frase "Leia Mais". Na verdade, a frase "Leia Mais" ficou por cima da imagem, então lá em "Postagens do Blog", no campo em que a gente escrevia "Leia Mais", eu coloquei caracteres invisíveis, aí deu mais ou menos certo, porque agora o que é clicável é o caractere invisível que está por cima da imagem, e não imagem em si.

    Vou especificar a mudança pra eu me expressar melhor:
    Antes era assim:

    .jump-link {
    text-align: right; /*Alinhamento do "Leia mais"*/
    font-size: 20px; /*Tamanho da fonte*/
    font-weigth: bold;
    margin: 5px 10px 5px 0px;

    Aí você disse pra eu colocar assim:

    .jump-link {
    background: transparent url(endereço da sua imagem) no-repeat;
    text-align: right; /*Alinhamento do "Leia mais"*/
    font-size: 20px; /*Tamanho da fonte*/
    font-weigth: bold;
    margin: 5px 10px 5px 0px;

    Então apaguei as linhas text-align, font-size, font-weigth, margin porque não faria sentido tê-las, né?

    Mas aí a imagem não está mais clicável… por que será?
    Desde já eu agredoço muitão, e entendo se não for possível ajudar.
    Abraços e muito mais sucesso com o blog!

  28. ::Clau:: disse:

    @PHelipe:
    Eu não testei isso, mas acredito que dê pra colocar imagem sim, faz um teste e tenta fazer o mesmo procedimento que teria q ser feito com o "showlink" (que é o do Hack Leia Mais automático).
    Outra sugestão tb é tentar colocar a imagem em "jump-link", ficaria +/- assim:
    .jump-link {
    background: transparent url(endereço da sua imagem) no-repeat;

    Espero que consiga. Boa sorte e obrigada pela visita.

  29. PHelipe disse:

    Olá, Clau!
    Primeiro queria agradecer elo seu blog. Ele é realmente muito bom e tem me ajudado muuuuito mesmo!

    Agora gostaria de saber se tem como, pore sse moddo acima, colocar uma imagem no lugar da palavra.
    Tem como? Ou é só pelooutro modo do "Leia Mais" automático?

    Desde já, muitoobrigado!

  30. ::Clau:: disse:

    @Kássio:
    Tem sim. Dá uma lida neste tutorial:
    Hack" Leia Mais" – resumo automático

  31. Kássio disse:

    Olá gosto muito do seu site e do seu trabalho, e visito ele constatemente!

    Gostaria so de tirar uma duvida…tem como personalizar para que o jump seja ativado automaticamente? já definido tio depois de uma determinada quantidade de caracteres? (obrigado pelas informações e se puder me ajudar fico muito grato XD)

  32. Tânia Souza disse:

    Nossa Clau, tentei dos dois jeitos mas acho que o primeiro foi que deu certo, fiz uma confusão, mas consegui, valeu mesmo!!!

  33. ::Clau:: disse:

    Carla:
    Pois é…sem falar q a home fica mais limpa…eu utilizo esse recurso de postagens resumidas aqui desde qdo criei o blog.Antes usava com script agora uso o do blogger mesmo..
    Viu como é facil ativar? Não tem mistério nenhum…=)

    .::Clau::.

  34. ?Carla_Witch Princess? disse:

    Nossa, Clau!
    Gostei desse recurso e resolvi experimentar…
    Sabe que gostei?
    Dá p/ colocar + posts na página inicial do blog…
    Vlw pela dica!
    Bjinhosssssssssss

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.