Como colocar os posts do blog resumidos na página inicial? - * Blog Elaine Gaspareto *

Como colocar os posts do blog resumidos na página inicial?

Publicado em 15/02/2018


Venho prometendo este tutorial faz tempo, mas como há muita coisa planejada e em andamento no blog sempre acabo deixando pra depois... mas hoje, finalmente, vou cumprir a promessa.
Vou te ensinar 2 formas de inserir em seu blog o resumo de postagens.
Uma das formas será manual, usando o recurso jump break nativo do Blogger que possibilita ter o post que você quiser resumido, e a outra será mais complexa, utilizando o mesmo script que uso aqui no blog e que resume todos os posts automaticamente.
Vamos trabalhar?

Como inserir o resumo nos posts do blog- modo simples, nativo do Blogger


Vamos começar com o modo mais simples.
Há, no Blogger, o recurso chamado jump break, que nada mais é do que "cortar" o post onde você desejar e inserir ali o Leia mais, Continue lendo, etc...
Ele não é automático, ou seja: não é aplicado automaticamente a todos os posts.
Você precisa, na hora de publicar o post, definir se e onde deseja que a postagem tenha a quebra.

Para fazer isso é muito simples: com o texto pronto, formatado, imagens inseridas, etc... clique no 7º ícone que aparece no alto do editor de postagens do blog (ali onde você escreve os posts).
A quebra será inserida e o resultado será seu post resumido na página inicial do blog.
Por padrão não há personalização alguma nesse recurso, o link é posicionado a esquerda e fica bem comum.
Vamos melhorar isso!

Acesse a aba Tema do blog onde deseja testar a personalização e clique em Editar HTML.
Dentro da caixa de código tecle Ctrl+F e na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima disso cole o CÓDIGO DE PERSONALIZAÇÃO DO JUMP BREAK que você escolher.

Copiar o código


Nesse código você altera detalhes como cor de fundo, cor de fonte, tipo de fonte, etc...
Ficará assim (escolhi o Modelo 4):


Demonstração do tutorial


Deixei na página com o código mais  3 opções diferentes de botão, mas o processo de inserção é o mesmo.
Escolha a sua personalização preferida, edite cores e fontes e salve.

Para alterar o texto que aparece no botão vá até a aba Layout e clique em Editar abaixo da área Postagens no blog.
Aí, no item Texto do link da página de postagem: troque o texto que estiver pelo texto que desejar e salve.
Toda vez que quiser inserir o resumo no post basta fazer como expliquei: post pronto, pare o mouse onde deseja inserir a quebra e tá feito.


Resumo automático para posts do blog, com imagens grandes e leia mais personalizado


Agora vamos ao tutorial mais complexo, mas ainda assim muito simples, basta um tiquinho de atenção.
Comece acessando a página com os códigos que vamos precisar:


Copiar o código


Acesse a aba Tema do blog onde deseja testar e clique em Editar HTML.
A seguir tecle Ctrl+F dentro do código fonte e na barra de busca que aparecer digite </head> e tecle Enter para localizar.
Acima de </head> cole o CÓDIGO JAVASCRIPT.
Salve.

Na barra de busca digite e tecle enter para localizar.
Acima dessa tag de fechamento cole o CÓDIGO CSS,  que dá forma e posiciona o botão Leia mais.
Ajuste conforme ficar melhor para seu blog e salve.

Agora preste atenção!
Na barra de busca digite

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'

e localize.
Pode aparecer 2 ocorrências desse trecho, estamos em busca daquele que fica acima de <div class='post-footer'>.
Estará assim:


Selecione como marquei na imagem, e no lugar desse código cole o CÓDIGO HTML.
Salve, altere a frase Leia mais e tá feito!

Observação:
Em alguns templates o código a ser localizado e selecionado pode aparecer assim:


Não tem problema; o importante é que comece com as linhas
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'
e termine com
<div style='clear: both;'/> <!-- clear for photos floats -->
          </div>

Importante:
Em templates baixados da internet provavelmente não dará certo, mas você pode testar. A maioria, inclusive, já vem com os posts resumidos na home.
Nos templates nativos do Blogger do tipo Visualizações dinâmicas e os novos responsivos tipo Soho, Notável, etc... não é possível aplicar esse tutorial.

Para facilitar eu gravei a execução em vídeo, vamos ver?



Se inscreve no canal, ele serve de apoio aos tutoriais do blog, e assim você me ajuda demais!.
Inscreva-se!


E terminamos!
Espero que seja útil!
Se você tiver qualquer dificuldade diga nos comentários do post e eu ajudo se for possível.
Aproveita e ajudaê, mig@s!
Compartilhe o post!
Só um cliquinho...





11 comentários via Blogger
comentários via Facebook

11 comentários:

  1. Poxa Elaine, não sei nem como agradecer! O blog fica bem mais leve, mais rápido e o visual fica lindo. Eu tinha feito este pedido na Perguntaê e estávamos em sintonia, pois no mesmo dia você postou. Super agradeço, de coração! Vou sim compartilhar com minhas amigas blogueiras. Bjs!!!

    ResponderExcluir
  2. consegui fazer no meu blog testes mais no original não apareceu nada :(
    ele tem layout responsivo..
    ajuda-me

    ResponderExcluir
    Respostas
    1. Caso seu template seja baixado da internet pode mesmo não funcionar, conforme digo no tutorial.
      Nesse caso não há o que fazer, infelizmente, pois cada template externo ao Blogger pode possuir códigos peculiares que não tem como eu saber... infelizmente

      Excluir
  3. Oi Elaine ... Mais uma vez, muito obrigado pelo tutorial. Funcinou tudo bem mas fiquei só com duas dúvidas. Será que me podia ajudar ?
    1.Só preciso inserir o código de personalização do Jump Break uma vez, certo ? Depois disso, sempre que escrever um post e seleccionar a quebra de página, ele vai ficar sempre personalizado ?
    2.Pus o Jump Break em alguns posts mais antigos mas os posts aparecem sem jump break quando vou ver o blog. Só vai aparecer em posts que eu fizer DEPOIS de inserir o código HTML ?

    Muito obrigado por tudo!
    Um beijo grande de Portugal :)


    ResponderExcluir
    Respostas
    1. Cátia, sim, só uma vez tanto para o resumo automático quanto para o jump breck nativo do Blogger.
      Se você entrar na página do post é claro que não verá o resumo, ele só aparece na página inicial. Faça o teste inserindo o jump breack em um post recente, abra o blog na home e vc verá que está tudo certo, entende?
      bjssss

      Excluir
  4. Bom dia, Elaine!

    Deu certo. Pelo computador fica centralizado como o teu.
    Mas pelo celular ele fica "colado" na lateral esquerda do blog. Por quê será? O blog: https://vivian-cozinhasimples.blogspot.com.br

    Dá para arrumar? Senão como tiro? Grata!

    ResponderExcluir
    Respostas
    1. Vivian, tem um tutorial aqui no blog que ensina como ajustar os botões caso seu template seja responsivo:
      https://www.elainegaspareto.com/2018/03/design-responsivo-media-queries-blogger.html

      Ele explica como ajustar o botão.
      Caso não consiga e queira retirar precisa reinserir o backup feito.
      Vc fez backup, né?

      Excluir
  5. Elaine eu fiz, estava atrás de tutorial faz tempo.
    Obrigada.

    ResponderExcluir
  6. elaine seu blog de teste nao ta deixando copiar o codigo nao sei oque ta acontecendo poderia me ajudar

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…