Postagens relacionadas para blog- modelo responsivo pronto para usar! - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Postagens relacionadas para blog- modelo responsivo pronto para usar!

Publicado em 22/05/2019

Postagens relacionadas para blog- modelo responsivo pronto para usar!
Aqui no blog existem diversos posts que ensinam como colocar as postagens relacionados abaixo das postagens.
Não identificou do que estou falando?
Falo desse recurso muito importante que chamamos de Related posts, Postagens relacionadas, e que, aqui no blog, aparecem ao final dos posts com o título de Gostou do post? Confira também:
Localizou?
Então, isso são o que chamamos de Postagens relacionadas e como eu disse no começo tem alguns tutoriais já publicados no blog, confira:


Mas eu sempre senti falta de um script que fosse automaticamente responsivo.
Aqui no blog, no momento em que escrevo, uso um script não responsivo, o que me obrigou a escrever um código CSS para cada resolução de tela. Imagina o trabalhão que dá?
Aí, de tanto mexer, adaptei o script que te mostro hoje.
Depois de pronto, caso seu blog seja ficará assim:


Demonstração do tutorial


Vamos aprender?
É mega simples, apenas um pouco de atenção e você vai arrasar fazendo!
Vamos trabalhar?
Para começar acesse a página com os códigos necessários ao tutorial:


Copiar o código


Agora vá ao painel administrativo do blog onde deseja inserir as postagens relacionadas e clique na aba Tema.
Clique em Editar HTML e dentro da caixa com o código fonte de seu template tecle Ctrl+F.
Vai expandir a barra de busca; dentro dela digite </head> e tecle Enter para localizar.
Observe que é </head> e não <head>, ok?
Acima de </head> cole o CÓDIGO CSS e salve.

Agora, na barra de busca, digite <div class='post-footer-line post-footer-line-2'> e tecle Enter para localizar.
Provavelmente aparecerão 2 ocorrências dessa linha; estamos em busca da 2ª ocorrência, ok?
Abaixo dessa 2ª ocorrência cole o CÓDIGO HTML e salve.
Está pronto.
Sério, só isso.


Postagens relacionadas para blog- modelo responsivo: dicas e informações extras


  1. Para que as postagens relacionadas apareçam é preciso que seu blog tenha marcadores inseridos nos posts e que esses posts tenham ao menos uma imagem;
  2. O blog tem que ser público;
  3. Para trocar a expressão CONFIRA TAMBÉM basta alterar o texto que marquei em vermelho no código;
  4. Defini que o gadget exibiria 3 posts. Pode ser mais? Pode. Mas os excedentes dessa quantidade vão descer e se alinhar abaixo dos 3 primeiros. Faça testes e veja;
  5. Para alterar essa quantidade troque o valor 3 pelo número que desejar no CÓDIGO HTML;
  6. A fonte que usei é a Montserrat. Caso queira usar outra troque o nome montserrat pelo nome da fonte que deseja e não esqueça de fazer isso também no script da fonte (primeira linha depois de </style);
  7. Pode ser usado em temas não responsivos? Sim, pode, mas o resultado pode ser ligeiramente diferente;
  8. O recurso está configurado para aparecer apenas na página interna dos posts. Na home ele dá bug.
E é só isso.
Faça em seu blog, experimente, troque, mexa, se divirta.
É assim que a gente domina essa belezinha chamada blog :)

Salve o tutorial no Pinterest para testar mais tarde!
Postagens relacionadas para blog- modelo responsivo pronto para usar!







5 comentários

  1. Você conhece alguma forma de fazer um índice dos assuntos que serão abordados no Post? É bacana para quando o post é longo, e para guiar os leitores. Os tutoriais que existem para o Blogger são bem antigos, eu testei e não funcionam! :/

    ResponderExcluir
    Respostas
    1. É isso mesmo! Os 3 tutoriais que encontrei dão caminhos diferentes, mas nenhum funcionou.

      Excluir
    2. De todos esse é o melhor, ele se adaptou perfeitamente ao meu modelo responsivo nem parece que foi adicionado. Mas para funcionar tive que adicionar o segundo código embaixo da TAG < div class='post-footer-line post-footer-line-3'>
      Para ver como ficou visite http://www.saintssuuh.com ❤❤❤❤

      Excluir

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.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
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…