Postagens relacionadas para blog- código pronto para usar - * Blog Elaine Gaspareto *

Postagens relacionadas para blog- código pronto para usar

em 28/11/2017

postagens relacionadas

Olá, querido leitor que também tem um blog!
Sabe as postagens relacionadas que aparecem ao final dos posts em praticamente todos os blogs que a gente acessa?
Então, vou te ensinar como colocar em seu blog, sem precisar de códigos externos, nem do Linkwithin.
Tudo em 3 passos simples, totalmente personalizável e bem bonitinho!
Aliás, aqui no blog há vários modelos para você escolher, veja:


Hoje quero te mostrar este:


Veja ao vivo instalado em meu blog de testes:


Demonstração do tutorial


Para ter em seu blog é bem simples.
Acesse o painel administrativo de seu blog e clique na aba Tema.
A seguir clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Na barra de busca que sirgir digite ]]></b:skin> e tecle Enter para localizar.
Acima dessa tag cole o CÓDIGO CSS.
Salve.

Agora digite </head> na pesquisa e localize.
Acima dessa tag cole o CÓDIGO JAVASCRIPT.
Salve.

Localize agora <div class='post-footer-line post-footer-line-3'> e acima disso cole o CÓDIGO HTML.
Salve.
Está pronto.
Sim, é isso aí!
E, claro, ia esquecendo, os códigos necessários:


Copiar o código

Dicas extras muito importantes- leia!


1- Detalhes como cores, tamanho da miniatura e fontes são alterados no CÓDIGO CSS.
Sempre que quiser mudar algo nesse sentido é esse o código a ser editado. Está marcado no código as áreas que considero seguros você mexer.

2- Eu hospedei o arquivo javascript em minha conta Tumblr mas recomendo vivamente que você salve-o em um bloco de notas com a terminação .js e hospede em seu próprio host.
Sugiro este post para aprender como fazer isso:


3- O CÓDIGO HTML é onde você altera a quantidade de posts mostrados e a frase Confira também.
Altere o número 4 pela quantidade que preferir e salve. Altere a frase como desejar e salve.

4- A ocorrência <div class='post-footer-line post-footer-line-3'> provavelmente aparecerá 2 vezes em seu template. Estamos em busca da segunda vez que ela aparece, tá?
Faça testes, se colou o código e nada apareceu procure pela outra ocorrência da linha e cole abaixo dela.

Também pode ser colado abaixo de qualquer post-footer: post-footer-line-1, post-footer-line-2 ou post-footer-line-3 desde que seja sempre respeitada a regra de ser abaixo da segunda ocorrência de uma dessas linhas.
Assim:


5- Esse widget substitui o Linkwithin, por exemplo.
E se tiver algum gadget de postagens relacionadas em seu blog e quiser usar este tem que excluir o anterior, ok?

E terminamos!
Se tiver qualquer dúvida deixe sua pergunta nos comentários e eu ajudo se for possível!
E se puder ajudar meu blog curtindo ou recomendando esse tutorial em suas redes sociais eu fico muito grata!

3 comentários via Blogger
comentários via Facebook

3 comentários:

  1. Oi Elaine muito obrigada por mais uma dica. Acabei de seguir esse tutorial e deu tudo certo! Amei! Você é o máximo e uma querida! :)

    ResponderExcluir
  2. Link salvo pra eventuais problemas no meu código. Amei a dica.


    Vidas em Preto e Branco

    ResponderExcluir
  3. Como não me atrevo a mexer no modelo do blog,fico a espera de postagens relacionadas em forma de Gadget.
    Pedindo demais,né!
    Beijos

    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…



No Instagram