Postagens relacionadas para blog- modelo pronto para usar - * Blog Elaine Gaspareto *

Postagens relacionadas para blog- modelo pronto para usar

Publicado em 06/12/2017

Tempo de leitura:

Postagens relacionadas para blog- modelo pronto para usar

Há, aqui no blog, alguns tutoriais que ensinam como colocar no blog os posts relacionados, essas miniaturas que aparecem ao final dos posts com recomendações de outros posts de mesma categoria/assunto.
Relembre os que já foram postados aqui no blog:


Hoje quero te mostrar essa variação:


Demonstração do tutorial


Ela usa basicamente os mesmos scripts das anteriores, o que muda é a aparência. São imagens maiores, vistosas e modernas.
Vamos aprender?


Como colocar as postagens relacionadas no blog?



Para começar acesse o painel de seu blog e clique na aba Tema.
A seguir clique em Editar HTML e dentro da caixa de código tecle Ctrl+F.
Na barra de busca que expandir digite </head> e tecle Enter para localizar.
Acima </head> cole o CÓDIGO CSS E JAVASCRIPT.
Sim, juntei ambos num bloco só, pra facilitar.
E é nesse bloco que você altera o tamanho das miniaturas, a cor e o tamanho das fontes, etc.
Leia o código, ele te dirá onde e o que alterar.
Depois de feita essa parte, salve.

A seguir localize <div class='post-footer-line post-footer-line-3'> e abaixo dele cole o CÓDIGO HTML.
Neste código está a quantidade de posts exibidos. Eu configurei para mostrar 3, se desejar alterar substitua o número 3 (que aparece duas vezes) pelo número de posts que desejar mostrar.
Salve.
E  tá feito!
Simples demais, né?

E, claro, os códigos que você vai precisar:


Copiar o código

Dicas extras para te ajudar:


  1. Se já existir em seu blog outro modelo de postagens relacionadas precisará excluir o pré-existente para inserir este, tá?
  2. Precisa ter marcadores inseridos em suas postagens, senão o recurso não funcionará corretamente.
  3. Seu blog precisa ser público; blogs privados não exibirão o recurso.
  4. Pode acontecer de você encontrar 2 ocorrências de <div class='post-footer-line post-footer-line-3'>; estamos em busca da segunda ocorrência, ok?
  5. Se não achar <div class='post-footer-line post-footer-line-3'> experimente qualquer linha de post-footer. Mas em geral todos os templates possuem essa linha.
  6. O tamanho da miniatura pode e deve ser alterado para que encaixe em seu template; faça testes, tá?


Aproveita que foi tão fácil e compartilhe esse tutorial em uma de suas redes sociais.
eu agradeço demais!





17 comentários via Blogger
comentários via Facebook

17 comentários:

  1. Oi Elaine gostaria de saber como que coloca aquela caixa preta de curtir a fanpage do blog como do seu blog no rodapé/lateral. Procurei o tutorial e não encontrei. Beijão

    ResponderExcluir
    Respostas
    1. Silvania, tem tutorial sim. Procure na categoria Facebook. Não lembro agora o nome, mas lembro que fiz há alguns anos :)

      Excluir
  2. Muito obrigado por compartilhar os conhecimentos, isso é fundamental para uma blogosfera de qualidade.

    Adicionei este recurso ao meu blog e gostei bastante, se puder passar lá pra conferir e me dar algumas dicas eu agradeço.

    ResponderExcluir
  3. Muito obrigada!!! Eu mudei algumas configurações no blog e tinha perdido essa configuração, mas não estava conseguindo colocar por nada! Só consegui com o seu tutorial! Beijos e sucesso :*

    ResponderExcluir
  4. Oi, Elaine!!
    Segui os passos mas não aparece nada...já testei em todos os post-footer e não adiantou...
    Estou usando o modelo espetacular do blogger...o que pode estar errado?

    O tutorial para colocar o botão para comentar pelo Facebook deu certo! Já está lá.Obrigada.

    ResponderExcluir
  5. Elaine!!
    Vim correndo avisar, DEU CERTO!!! Eu não tinha marcadores no meu blog de teste! Juro que achei que tinha, faz tempo que o tenho...
    Então fiz no meu mesmo e deu tudo certo!!
    MUITO OBRIGADA!!!
    Bjs.

    ResponderExcluir
  6. Olá Elaine,
    Ficou genial, só que é pena essa apresentação de posts relacionados aparecer também em todos os posts da página principal. Não daria para ocultar e só apresentar após aberto um post?
    Muito obrigado

    ResponderExcluir
    Respostas
    1. Ed, tem jeito sim.
      Procure aqui no blog um post chamado As condicionais do Blogger
      Ele ensina como usar as condicionais pra ocultar ou exibir elementos conforme desejar.

      Excluir
    2. Muito obrigado Elaine.
      Tudo bom para você ;)

      Excluir
    3. Este comentário foi removido pelo autor.

      Excluir
    4. Olá Elaine,

      O problema de ontem foi resolvido, tive de tirar os 25px que coloquei no margin:0px; /*DISTANCIA EM RELAÇÃO A MARGEM ESQUERDA, ALTERE SE PRECISAR*/ . Porque empurrava muito para a direita e fazia espaço em baixo.

      Agora um outro problema, que já parti a cabeça aqui e não estou a conseguir solucionar. No meu blog de testes aparecia 3 noticias relacionadas, mas no meu blog principal só me aparece 2. Já revi o código de cima para baixo 10 vezes e não encontro uma opção para mexer na quantidade de noticias a apresentar. A minha questão é, haverá uma opção?

      Excluir
    5. Ed, não há solução.
      De vez em quando, em alguns posts meus, isso ocorre.
      Com o tempo e conforme for tendo mais posts em cada categoria isso vai sendo minimizado, mas sempre pode acontecer, ainda que esporadicamente...

      Excluir
  7. No meu blog deu certo, mas como eu posso torná-lo responsivo? Quando se diminue o tamanho da tela, fica empurrando o último quadradinho para baixo. Já tentei colocar o "height" e o "width" como "max-height" e "max-width", mas não adiantou. As imagens ficarão retangulares (formato original).

    (Obs.: Há um tempo, tornei o template responsivo, a partir daquele tutorial com tema-base Viagem)

    Desde já obrigada, Naryana.
    https://blogtitule.blogspot.com.br

    ResponderExcluir
  8. Pode deixar para lá. Já resolvi. Os media queries não estavam batendo com o tamanho que eu tava colocando 😅

    ResponderExcluir
    Respostas
    1. Naryana, é isso mesmo, precisa inserir media queries para cada tamanho.
      Estou estudando um jeito de tornar o script responsivo mas ainda estou esbarrando num erros.
      Se conseguir publico um tutorial em breve
      bjssss

      Excluir
  9. Deu super certo!!!! Muito obrigada! Suas dicas são incríveis (já usei várias) e meu blog tá ficando do jeitinho que eu queria. bjs

    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…