Postagens relacionadas para blog com data, snippet e tags- responsivo , moderno e completo! - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Postagens relacionadas para blog com data, snippet e tags- responsivo , moderno e completo!

Publicado em 04/03/2020

Postagens relacionadas para blog com data, snippet e tags- responsivo , moderno e completo!
Já publiquei inúmeros tutoriais que ensinam como adicionar ao blog o recurso Postagens relacionadas para usar no blog, que são essas miniaturas que aparecem, em geral, ao final dos posts com indicações de outros posts semelhantes para aumentar o engajamento do leitor.
Hoje quero te mostrar este, mais completo, responsivo e bem bonito.

Demonstração do tutorial

Postagens relacionadas para Blogger- modelo responsivo e completo!


Antes de mais nada algumas dicas importantes:

  • leia e releia o código, especialmente as áreas que marquei em capslock; ali estão as partes editáveis como cores e fontes.
  • teste antes em um blog de testes, até ica como deseja.
  • o blog, seja o seu ou o de testes, precisa ter posts com imagens e ter os marcadores inseridos em cada post pois são os marcadores que fazem a mágica acontecer.
  • não funciona nos modelos de visualizações dinâmicas e nem nos modelos Soho, Comtempo, Notável e Empório.
  • os créditos do script estão no código e pertencem ao site http://spot.sneeit.com/

Agora estamos prontos.
Vamos trabalhar?
Abra a página com os códigos que vamos usar no tutorial de hoje:

Copiar o código

Agora acesse o painel administrativo do blog onde deseja testar o recurso. Clique em Layout.
Aí clique em Adicionar um gadget, e dentre as opções que surgirem escolha HTML/JAVASCRIPT.
Na caixinha que expandir cole o CÓDIGO CSS E JAVASCRIPT.
Ajuste cores e fontes como desejar.

Preste atenção!
O título que você colocar nesse gadget será o título que aparecerá nas postagens relacionadas.
Eu, por exemplo, escolhi Confira também.
Escolha o seu título e salve.

Falta 1 passo!
Acesse a aba Tema de seu blog e a seguir clique em Editar HTML.
Dentro da caixa com o código fonte tecle Ctrl+F e na barra de busca que expandir digite <b:include data='post' name='post'/> e tecle Enter para localizar.
Abaixo dessa linha cole o CÓDIGO HTML e salve.
Visualize um post de seu blog e veja se está ok.
Tá feito!

Importante: este recurso está configurado para aparecer apenas nas páginas internas do post e não na home do blog.
Ele não funciona na home, fica mostrando apenas 3 posts, sempre os mesmos.
Se você precisa de um que funcione na home do blog sugiro escolher um dos modelos de postagens relacionadas que já publiquei aqui no blog.

Tem alguma dúvida, pergunta ou sugestão de pauta?
Diz aí nos comentários e eu ajudo se possível!





Nenhum comentário:

Postar um comentário

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…