Postagens relacionadas para blog ao final dos posts- simples e sem complicação - * Blog Elaine Gaspareto *

Postagens relacionadas para blog ao final dos posts- simples e sem complicação

em 17/01/2017

postagens relacionadas para blog ao final dos posts- simples e sem complicação

Já publiquei aqui no blog alguns tutoriais que ensinam como colocar, ao final dos posts, as Postagens relacionadas.
Não sabe o que é?
São as recomendações de outros posts que a gente coloca ao final das postagens e que ajudam a manter o leitor mais tempo no blog. Acho indispensável!
Olhe o final desse post, sob o título de FIQUE MAIS UM POUCO COMIGO! VEJA TAMBÉM:
Então, é esse recurso que estamos falando...

Relembre aqui tudo que já foi postado no Blog Elaine Gaspareto sobre Postagens relacionadas.


Hoje quero compartilhar contigo mais uma forma de fazer isso.
Quando terminarmos ficará assim:


Demonstração do tutorial

Fica legal, né? Você pode modificar a frase do título, pode mudar a fonte e a cor, pode arredondar as miniaturas...
Vamos trabalhar?

Antes, 2 conselhos:
  1. Sempre faça essas modificações mais avançadas em um blog de testes antes de partir para o seu blog real. Coloque nesse blog de testes uns 5 ou mais posts com imagem, marcadores e use o mesmo template de seu blog real. Deixe o blog em modo público, feed completo e aí sim faça nele o tutorial. Depois de praticar refaça em seu blog real. Vai por mim, evita dor de cabeça.
  2. Antes de começar qualquer tutorial Blogger leia e releia as explicações até se certificar de haver entendido.A imensa maioria das perguntas que recebo referentes aos tutoriais do blog são perguntas cujas respostas já estão no post. Então, leia, releia e só comece após haver entendido.

Precauções tomadas, vamos ao tutorial?
Para começarmos abra a página com os códigos necessários à realização do tutorial e a mantenha aberta:


Copiar o código



Como colocar as postagens relacionadas no blog?



Para começar acesse a aba Modelo de seu blog, onde vai instalar as postagens relacionadas para blog.
Clique na aba Editar HTML e dentro da caixa do código fonte tecle Ctrl+F.
Vai expandir uma barra de pesquisa.
Nessa barra de busca digite </head> e tecle Enter para localizar.
ACIMA dessa tag de fechamento cole o CÓDIGO DAS POSTAGENS RELACIONADAS PARA BLOG
Salve.

Este código é inovador em relação aos que ensinei antes pois ele não requer que o script seja hospedado externamente para funcionar. Alojamos o script direto no código-fonte do blog e isso impede que um dia saia do ar por excesso de tráfego no servidor ou se o site de hospedagem cair, por exemplo.

Caso queira modificar cores, tamanho das miniaturas ou fontes é tudo nesse código.
Precisa, claro, ter um conhecimento básico em edição de CSS.
Caso não altere nada o resultado será exatamente como na minha imagem demonstrativa.

Feita essa parte vamos ao passo final!
Localize, usando a barra de pesquisa do código-fonte, este trecho:



Provavelmente seu blog apresentará 2 ocorrências dessa tag, estamos em busca da segunda ocorrência, ok?

Também pode ser que seu template não tenha post-footer-line-3. Nesse caso localize <div class='post-footer-line post-footer-line-2'>, ambos servem.
Achou a linha que queremos? Segunda ocorrência, não esqueça!

Abaixo dela cole o CÓDIGO HTML e salve.
À esta altura seus posts relacionados já devem aparecer no blog.
Caso não apareça releia o tutorial e confira os passos.


Para facilitar a sua vida gravei a execução do tutorial em vídeo.
No vídeo eu explico um pouco sobre como mudar cores, fontes, quantidade de posts mostrados, etc...
Aperta o play e tire as dúvidas que possa ter:








Gostou do post?
Ajude o blog com o método Cococu!
Não sabe o que é cococu?
*Método cococu:
co= compartilhar
co= comentar
cu= curtir

Método cococu de ajudar essa blogueira que vos fala! 😄
Ajudaê, mig@s!!!

28 comentários via Blogger
comentários via Facebook

28 comentários:

  1. Que interessante! Vou tentar fazer no meu blog. Quero aproveitar e te fazer uma sugestão para postagem. Como começar a usar o instagran de forma simples? Postar, abrir e fechar a página, fazer comentários... Estou apanhando aqui e as informações que tive acesso não me ajudaram muito. Obrigada.

    ResponderExcluir
    Respostas
    1. Anabela, tem 2 posts recentes aqui no blog sobre Instagram, talvez o primeiro deles te ajude.
      Mas vou anotar a dica, quero mesmo falar mais de Instagram em breve.
      bjssss

      Excluir
  2. kkkkkkk adorei o método cococu!!!
    Estou amando o novo layout do meu blog!!! Adivinha quem personalizou??? Ficou bem mais leve!!! Tudo abre rapidinho!!!! :) ;)

    ResponderExcluir
  3. Muito bom o tutoria, Elaine. Já tentei tantas vezes mas tive medo, com a ajuda do vídeo penso que vai facilitar muito. Obrigada, já compartilhei...rs rs!

    ResponderExcluir
  4. Ótimo o tutorial, foi de grande ajuda! Mais uma vez o meu muito obrigado! Deus te abençoe!!!

    ResponderExcluir
  5. Ahaha adorei o método cococu! Pode deixar que aqui sempre compartilho! São sempre posts ótimos, sejam eles de dicas de receitas, tutoriais e reflexões.
    Muito obrigada por esse post. Deu muito certo! Ainda vou treinar mais o CSS pra conseguir mudar as coisas, ainda não estou segura pra fazer as modificações.

    Beijos.

    Blog Jovens Mães

    ResponderExcluir
  6. Minina, que ideia demais essa de ter um blog teste... Já fiz alterações no templante do meu blog e graças a Deus deu certo mas nunca imaginei em fazer isso de testar antes! Amei!
    Beijos
    www.acasadaritablog.blogspot.com.br

    ResponderExcluir
  7. Oi, Elaine, Passei a tarde fazendo um blog para testes :)
    Ficou lindinho! Dá dó de ser só teste... Estou fazendo tudo certinho como seu tutorial mais não está dando certo... Já li novamente, já vi o vídeo... Vou esfriar a cabeça e tentar de novo mais tarde....
    Um Beijinho!

    ResponderExcluir
  8. Voltei, Elaine! Fiz o blog teste e não deu certo... Arrisquei no blog real e tcharam: Deu certo!!!!! Muito obrigada!!!!

    ResponderExcluir
    Respostas
    1. rsrsr talvez seja porque o blog de testes esteja fechado ao público. Tem que ser blog público pra dar certo.
      Mas que bom que no blog real deu, isso que importa, né?
      Corajosa rsrsrs
      bjsssss

      Excluir
  9. Querida Elaine
    O que acontece quando não tem? O meu nao localiza o div class='post-footer-line post-footer-line-3'
    . O máximo que aparece é o div class
    Não consegui achar nem no de teste nem no real
    Adoro suas dicas.
    Bjs

    www.maeliteratura.com

    ResponderExcluir
    Respostas
    1. Claudia, todo template do Blogger tem essa tag. Se não tivesse não apareceria, por exemplo, o link do marcadores e os botões de compartilhar que aparecem em seu blog.
      Tente de novo, localize qualquer div class post-footer e você verá que as líneas estão lá, nem que seja 1.
      Olhei seu código fonte e tem todos lá rsrsrsr
      bjsss

      Excluir
    2. Olá Elaine, Visito sempre seu blog, seus tutorias são muito bons e me ajudam muito, você presta serviços como designer para terceiros? Pois eu gostaria de solicitar um orçamento com você só para fazer umas modificações que eu não sei. Meu Blog é o www.logatoloko.com.br Um blog de humor pequeno mas que eu pretendo tornar bem legal. Parabéns pelo seu trabalho um abraço.

      Excluir
  10. DEU CERTO! To à horas tentando sem sucesso, mas agora consegui graças a você, muito obrigada querida!

    ResponderExcluir
  11. Elaine, muito obrigada! Deu certinho. Só não consegui centralizar. O Título centraliza mas as miniaturas, não. Tem alguma forma de centralizar as miniaturas?
    Bjs!!!

    ResponderExcluir
  12. Oi Eleine gosto muito de suas dicas, mensagens relacionadas super adore!! Obrigada!

    ResponderExcluir
  13. Elaine, eu queria coloca isso no meu blogger; mas sem as imagens tem como ?!

    ResponderExcluir
  14. Olá pode me ajudar? No meu só aparece isso body.item-view .post-footer-line {
    line-height: 2.3;, não aparecei como no tutorial, já li diversos tutorais todos pedem esse código mas só encontro desta forma que citei e quando colo e salvo não acontece nada.

    ResponderExcluir
    Respostas
    1. Luana, se seu template é modificado e baixado da internet pode mesmo não dar certo. Minha sugestão é que vá colando em ocorrencias de post-footer que achar, até localizar a ocorrencia certa...

      Excluir
  15. Não achei duas ocorrencias para o código dentro do HTML. Só uma. Posso mexer mesmo assim?

    ResponderExcluir
    Respostas
    1. Pode tentar, Daniela, mas em geral tem sim as duas ocorrencias...

      Excluir
  16. Oi Elaine, adorei seu tutorial (alias, meu blog está quase todo feito com seus tutoriais rsrs). Você pode me ajudar com das coisinhas por favor? O seu está com 4 postagens, eu gostaria de aumentar esse numero, como faz?

    Bites!
    Tary Belmont

    ResponderExcluir
    Respostas
    1. Tary, procure no CÓDIGO HTML a linha var maxresults=4; e altere o valor expresso pelo número 4 :)

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

    ResponderExcluir
  18. Oi Elaine, tudo bom? Antes de mais nada, muito obrigada pela sua ajuda, esse site tem sido uma mão na roda! Já instalei o código aqui, está tudo certinho! A única coisa é que ele corta o título (coloca reticências) , procurei no código e não achei, existe alguma maneira do título aparecer completo?

    ResponderExcluir
    Respostas
    1. Luisa, completo eu não sei, mas se quiser aumentar a quantidade de caracteres encontre no primeiro código esse trecho: length>35
      E altere o valor 35 pelo valor que desejar.
      Também altere substring(0,35
      pelo mesmo valor. Ambas as ocorrências estão próximas uma da outra.
      Esse número define a quantidade de caracteres mostrada no widget.
      Nunca testei em blogs reais porque nunca senti necessidade, mas é isso aí.

      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.
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…



Visualizações

Contando...

Dias online
Postagens
comentários