Postagens relacionadas para blog- sem precisar do Linkwithin!

em 23 de março de 2015


Um dos recursos mais legais e que eu considero que todo blog precisa ter são as postagens relacionadas que (normalmente) aparecem ao final dos posts.
Há alguns sites que geram esse script, sendo que o mais popular deles é o Linkwithin.

Acontece, porém, que há falhas no script gerado. Nem sempre as postagens aparecem, ou as miniaturas aparecem.
E há templates que simplesmente não aceitam o script gerado.
Sem contar que as possibilidades de personalização são reduzidas...
Mas se você andava procurando um script fácil de usar, altamente personalizável e que seja todo hospedado dentro de seu próprio template, seus problemas siacabaram!
O tutorial de hoje vai te dar esse resultado:


Vamos aprender?
Não é simples de fazer, mas com atenção e dedicação você vai conseguir.
Certifique-se de ler e entender o tutorial antes de começar.
E, claro, experimente antes em um blog de testes, que precisa ser público, ter postagens e ter marcadores inseridos nas postagens.

Como instalar o widget?

Para começar vá até o painel de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa de código tecle Ctrl+F.
Na barrinha de busca que expandir digite </head> e tecle Enter para localizar.
Depois de localizar a tag cole abaixo dela este código:

Copiar o 1º código


Agora, dentro da barra de busca digite ]]></b:skin>.
Tecle Enter para localizar, e acima disso cole o segundo código, que define a aparência de seu widget.
Este código:

Copiar 2º código


Visualize, e se estiver tudo ok, salve as alterações. Calma, nada vai aparecer ainda.
Estamos finalizando!
Dentro da barra de busca digite isso:
<div class='post-footer'>
Tecle Enter para localizar.

Você provavelmente vai achar 2 ocorrências desse trecho.
Estamos procurando a segunda, ok?
Abaixo do trecho encontrado cole a terceira e última parte do código.
Essa:

Copiar o 3º código


Visualize, e se estiver ok, salve.
Se preferir colocar o widget em outro lugar faça testes, experimente abaixo de <div class='post-footer-line post-footer-line-1'> ou <div class='post-footer-line post-footer-line-1'>.
Faça testes, e defina qual o melhor lugar em seu template.

Nessa última parte do código você altera o título do widget e a quantidade de posts exibidos.
Deixei marcado em cores no código, ok?

Se você fez tudo certo você tem agora as postagens relacionadas sendo mostradas ao final de seus posts, de acordo com o marcador de cada postagem.

Dicas extras:

  1. Certifique-se de haver lido e entendido o tutorial e os códigos antes de começar;
  2. Faça antes em um blog de testes, e quando for fazer em seu blog faça backup antes;
  3. Seu blog precisa ser público e ter os feeds ativados;
  4. Precisa ter marcadores inseridos nos posts, senão não funciona;
  5. A quantidade de posts é alterada no 3º código, onde marquei em pink (está número 5, altere como desejar);
  6. Tudo que pode ser alterado no 2º código eu deixei marcado nele; cores sempre são alteradas pelo código hexadecimal. Para altera-las altere o código existente pelo código da cor que desejar;
  7. Fontes podem ser trocadas pela que preferir, basta colocar o nome da que deseja no lugar da que está no código.
  8. Paciência, essa é a chave! 




Gostou?
Que tal compartilhar o tutorial, ou curtir... ou recomendar no G+...


Você já conhece minha loja de templates à pronta entrega e serviços adicionais para blogs?
Clique e confira!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

86 comentários , comente também!

  1. Achei o máximo seu post, mas acho que vou contratar os serviços da amiga blogueira que edita este blog, pra fazer isto no meu bloguinho, kkk. Até porque, os preços que ela cobra são divinos!
    Logo entro em contato.
    Bjs

    ResponderExcluir
  2. Adorei Elaine! Ainda não tinha colocado as postagens relacionadas porque não conseguia fazer, mas assim fica fácil. :)

    Desde que comecei a planejar o meu blog, o seu tem sido minha referência e inspiração. Foi aqui que aprendi tudo que aprendi até agora, pois em outros lugares nada é tão explicadinho e possível de fazer como aqui. Depois que você registrou o meu domínio ele só tem crescido e já aparece em primeiro lugar nas pesquisas do Google, imagina a minha satisfação em ver o meu blog que não tem nem seis meses indo tão bem! Eu só tenho a lhe agradecer! ^^

    Uma semana iluminada, bjs.

    ResponderExcluir
  3. Oi Elaine, obrigado por me ajudar nessa tarefa. Foi muito bom. Obrigado.
    O meu só não ficou centralizado como o seu. Será que fiz algo errado?
    Beijos

    ResponderExcluir
    Respostas
    1. Juliana, experimente acrescentar mais posts a serem exibidos, tem espaço sobrando à direita :)
      bjsssss

      Excluir
  4. Elaine muito obrigada pelo tuto! Estava sem saber mais o que fazer pra conseguir esses posts relacionados! Queria apenas que você respondesse como faço para tirá-los da homepage. Eu queria fazê-los aparecer apenas ao abrir a postagem. Como faço?

    ResponderExcluir
  5. Como faço pra tirar da homepage? Parabéns pela postagem!!

    ResponderExcluir
    Respostas
    1. Use as condicionais do Blogger.
      Eu não tenho nenhum post sobre elas, mas se procurar no Google encontrará muitos blogs que ensinam, experimente o Mundo Blogger, se não me engano há um post lá sobre essas condicionais.
      Muito obrigada pelo elogio!

      Excluir
  6. Eu sempre consigo aplicar o que vc ensina no meu blog, mas dessa vez não funcionou.
    vc pode me passar o valor pra vc instar esse no meu blog.
    Blog: www.bloglindacor.com.br
    lindacorblog1@gmail.com

    Aguardo um retorno

    ResponderExcluir
  7. Adorei! Mas não consegui...

    http://vivendojesusdiaadia.blogspot.com.br/

    ResponderExcluir
  8. OI Elaine fiquei morrendo de vontade de Fazer. Fiz em meu blog de teste e deu certo. Mas no principal não consegui, aparecia as imagens dos posts em tamanhos reais/originais. Será porque?

    ResponderExcluir
  9. Oi Elaine tudo bem? Eu tentei colocar esse modelo de postagens relacionadas no meu blog e deu certo porém aparece somente uma postagem e só repete a postagem que está acima o que eu fiz de errado?

    ResponderExcluir
    Respostas
    1. Elaine descobri o que era eu estava fazendo em um blog de teste que tinha somente um marcador quando passei o template para o blog oficial ficou super certinho. Amei, muito obrigada!!!!

      Excluir
  10. Elaine será que você poderia fazer um post ensinando a usar o addthis para instalar botões de redes sociais e postagens relacionadas ? ele oferece tanta coisa boa mas é dificil pra quem ta começando conseguir usar e os posts que encontro são bem antigos e o site mudou o formato não da certo, por favor, se puder eu agradeço.

    ResponderExcluir
  11. Elaine vc é um anjo... vc esta me ajudando muito!!! Até agora esse foi o unico ponto que nao funcionou. Acho que esse so nao funcionou porque no layout que uso nao tem a 2 tag pra colar o 2 codigo o resto ficou perfeito!!!

    Obrigada!!

    http://culturabobagemebagagem.blogspot.com

    ResponderExcluir
  12. Menina, ainda bem que sou teimosa, hoje tentei novamente e... CONSEGUI!!!

    ResponderExcluir
  13. Elaine, eu usava antes o modelo viagem do blogger e tinha suas postagens relacionadas lá no meu blog. Mas agora uso o Mystery blogger template e não consigo colocar mais as postagens relacionadas lá. tentei fazer tudo como fiz da outra vez, mas no meu código só tem uma ocorrência do div class='post-footer'. O que eu faço?

    ResponderExcluir
    Respostas
    1. Vanessa, não faço ideia.
      Sempre dá certo em templates nativos.
      Em modelos baixados da internet nunca testei pois em geral os códigos são bem diferentes...

      Excluir
  14. O meu também só tem uma ocorrência do código... Uso o Awesome do Blogspot =(
    Não funcionou... Mas, parabéns pelo seu trabalho! Sempre venho aqui =)

    ResponderExcluir
  15. Sei que nunca respondeu meus comentários maaas......
    Sabe como eu faço para centralizar? O máximo de posts é 4?!

    Obrigada, ótimo post!! =)

    ResponderExcluir
    Respostas
    1. Bruna, para centralizar precisa ir mexendo no tamanho da miniatura, e ajustar até ficar como deseja, ou incluir mais miniaturas.
      A quantidade é definida pelo número em rosa no terceiro código.
      bjssss

      Excluir
    2. Obrigada!
      Tudo estava lindo, mas simplesmente, hoje sumiu do blog... voltei ao HTML, apaguei tudo, coloquei de novo e nada... já vi outros 8 tutoriais para postagens relacionadas e simplesmente, nenhum funcionou mais... será que pode me ajudar? Obrigada!!

      Excluir
    3. Sabe o motivo?
      O blog precisa ser público, se for privado nunca vai funcionar... :)
      bjsss

      Excluir
  16. seus códigos sempre me salvam. obrigada.
    xx

    ResponderExcluir
  17. uma dúvida: tem como mudar o default image?

    ResponderExcluir
    Respostas
    1. Paula, até tem mas precisa abrir o arquivo java, editar com o endereço de nova imagem e hospedar em um servidor, para daí trocar o link do arquivo...

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

      Excluir
    3. Elaine e Paula, eu também queria mudar a imagem default pra outra mas bonita, mas não entendi como faz... Tem como explicar num post, ou algo assim? Eu ficaria muito agradecida! <3 Bjss

      Excluir
  18. Elaine funcionou, fica aparecendo em todos os posts na tela inicial, cada postagem ta resumida no meu blog pq eu coloquei o "leia mais", aí fica aparecendo resumo, eu queria que aparecesse so no post, tem como?

    ResponderExcluir
    Respostas
    1. Experimente procurar aqui no blog um post que fala sobre as condicionais do Blogger.
      Elas permitem exibir/ocultar elementos como você deseja.

      Excluir
    2. Elaine eu apliquei as condicionais do blog de fazer sumir o post não lembro o que atom, todos os tres que você ensinou no seu blog, agora que eu vi o seu comentário eu tentei colocar de novo as postagens relacionadas, mas não tá aparecendo nem na home e nem nos posts, não sei o que é que tá errado, pois eu testei esse tutorial em outro blog e deu certo.

      Excluir
  19. fiz tudo direitinho mas não apareceu ´porque?

    ResponderExcluir
    Respostas
    1. Releia as dicas extras e você vai entender o porquê.

      Excluir
  20. Querida Elaine muito obrigada pela super dica! Além das instruções muito precisas claro, porque até mesmo para quem entende um pouco de HTML e códigos é fácil de se confundir. Como meu blog é de encomendas, bordados e outros artigos essa função é essencial!
    Muito obrigada mesmo!
    *Samanta Santos - Ateliê Fawkes

    ResponderExcluir
  21. Flooor,

    Se não quiser que esteja em caixa alta o título das postagens, como tira??

    Muuuito obrigada!!

    ResponderExcluir
    Respostas
    1. Morgana, basta excluir o trecho onde está uppercase, ou substituir uppercase por none.
      bjsss

      Excluir
  22. Elaine, sempre sigo suas dicas. Você esta de parabéns!
    Mas a algum tempo você inseriu um script que evita fazer seleção do seu conteúdo e copiá-lo, isso atrapalha bastante, tenho que desativar a exibição de script do meu navegador para conseguir copiar um código seu.

    ResponderExcluir
    Respostas
    1. Leandro, eu coloquei bloqueios porque cansei de ver meus posts copiados e colados na íntegra em outros blogs.
      Claro que sei que não impede, mas como em geral quem rouba conteúdo morre de preguiça, dificulta e inibe um pouco cópias tão descaradas e frequentes.
      Ademais, os códigos que precisam ser copiados estão ou na página de códigos (como é o caso deste tutorial, por exemplo), ou abrem com Synthax.
      Você encontrou algum tutorial que não tenha o código na página de códigos ou que não abra com Synthax?
      Me diz qual e assim que der eu edito.

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

    ResponderExcluir
  24. Fiz e não deu certo, tentarei de novo quando tiver com a cabeça mais fresca hahaha, seu blog é maravilhoso!

    ResponderExcluir
  25. Elaine eu tenho um blog www.homematualizado.com.br e queria se fosse possivel você fazer um tutorial para colocar um vizualizador de imagem no blog pra quando a pessoa clicar na imagem não abrir em outra guia espero que vc tenha me entendido, aguardo

    ResponderExcluir
  26. Vou la testar no meu e ver o resultado!

    ResponderExcluir
  27. Há uma outra inquietação quanto a essa coisa de "postagens relacionadas". O problema que estou a ter com o meu blog (www.dicasdaminhasaude.blogspot.com) é que depois de colocar nele os comentários do facebook, as postagens relacionadas já não aparecem, o espaço onde elas normalmente deveriam aparecer, fica a processar sem parar e não abre nada. Nos primeiros dias pensava eu que fosse problemas com a Net, mas percebi que não a ver com a net. Preciso de uma ajuda nisso!

    ResponderExcluir
  28. Muito bom o pst... consegui fazer direitinho.. obrigada

    ResponderExcluir
  29. Adorei o código! Muito útil! Muitíssimo obrigado por disponibilizá-lo pra gente! :D

    ResponderExcluir
  30. Oi Elaine,
    Vim aqui dizer que esta é mais uma personalização que instalei lá no blog. Mexi, adaptei aos padrões do meu cantinho, tá lindinho.
    Estou toda orgulhosa do tanto que já aprendi, só de olhar o código já vou percebendo onde preciso mudar pra fica do meu jeito. E tudo graças a você!

    Beijos e mais uma vez obrigada.

    ResponderExcluir
  31. Gostei demais. Parabéns!

    Só tenho uma dúvida: Como faço para que os títulos dos relaciados fiquem centralizados (junto com as miniaturas)?

    ResponderExcluir
  32. Eu amo o seu blog!! Sempre me ajuda pra caramba!! Com todas as dúvidas eu sempre procuro as respostas em todo canto, mas ai sempre encontro no seu blog! E as respostas que acho no seu blog sempre funcionam!!! E são fáceis de entender!! Continue com o trabalho maravilhoso!! Parabéns XD

    ResponderExcluir
  33. Oi Elaine
    No meu blog deu certo só que as imagens não ficaram em miniaturas por que será?

    ResponderExcluir
  34. Valeu Elaine muito bem explicado ficou perfeito, personalizei e ficou ótimo (www.netmisterios.blogspot.com.br).

    Muito obrigado!

    ResponderExcluir
  35. Oi, sei que a postagem tem um tempo, mas espero que consiga responder... Então consegui instalar tudo sem problemas! Obrigada pelos links. Mas não consigo diminuir o número de miniaturas, aparecem 5 e eu queria que aparecessem menos.

    ResponderExcluir
    Respostas
    1. Sabrina, releia o código, especialmente o CSS e o tutorial, as informações estão todas lá...

      Excluir
  36. Olá Elaine! Gostei muito de sua postagem! Coloquei no meu blog e ficou perfeito!
    Gostaria de saber se vc tem algum script de link/dislike igual o do youtube e um script de views de postagem. No meu blog estou usando do ratingwidget.com mas não consigo personalizar muita coisa!
    Obrigado!

    ResponderExcluir
  37. Oie,
    eu achei um modelo de post relacionado que eu amei mais nao sei fazer e nem acho tutorial pode ajuda? ta nesse sit aqui > http://demo.mybloggerthemes.com/2015/05/winters-blogger-templates.html

    ResponderExcluir
    Respostas
    1. Fabiana, quando der tempo eu faço o tutorial :)

      Excluir
  38. Poxa que triste, o meu não funcionou!

    Estou utilizando o blogger dinâmico e não funcionou. Você tem alguma dica ?

    ResponderExcluir
    Respostas
    1. Tiago, nos modelos de visualização dinâmica não são aceitos gadgets no html do template.

      Excluir
  39. Olá Elaine,
    usei aqui e gostei muito... obrigado!!!

    mas,
    como eu poderia colocar um
    title=

    ligado à descrição da postagem, pra quando o leitor parar com o mouse em cima da miniatura ou do texto, aparecer o texto da descrição?

    queria saber também, como mudar o efeito de opacidade (opacity) para um efeito de zoom nas miniaturas?

    aqui funcionou muito bem, se tiver como fazer essas façanhas... ficaria ainda melhor...
    abçs

    Blog "Espaço Prog" http://wesleybyrujah.blogspot.com
    Destinado aos fãs de rock progressivo
    siga o blog: https://goo.gl/AI47MU

    ResponderExcluir
  40. Oi Elaine tudo bem? eu queria muito colocar no meu blog, mas as imagens aparecem no tamanho original, sabe o que posso fazer???

    ResponderExcluir
  41. Olá obrigado pela dica, mas quando no meu blog as imagens aparecem em tamanho original, o que posso fazer? Bjs

    ResponderExcluir
  42. Boa noite!
    ha alguns meses venho tentando colocar essa postagem relacionadas porem nao consigo que ela fique em miniaturas ja fiz de tudo tamanho da miniatura quantiade de postagem tudo que foi possivel porem sem sucesso, alguma dica

    ResponderExcluir
  43. Boa noite Elaine,

    Parabéns Elaine, o meu LinkWithin estava com problema, não aparecia o número de postagens que queríamos, então achamos seu site e com esse que você criou ajudou de mais.

    Veja em nosso blog como ficou,

    https://bio-orbis.blogspot.com.br/

    Agradecemos novamente,

    Equipe BioOrbis.

    ResponderExcluir
  44. Adorei , muito obrigada você explica muito bem , consegui fazer sem nenhum problema . Beijos!
    www.cacheandocommirellydarlen.com

    ResponderExcluir
  45. OI Elaine , no meu blog de teste deu super certo, usei o modelo marca d'agua depois fui tentar no modelo Simples , não funcionou , porque ? Seu Blog é Maravilhoso , me ajuda bastante ;3

    ResponderExcluir
    Respostas
    1. Daiane, não sei dizer... mas pode ser que você tenha esquecido algo ou que algum código em seu blog esteja causando conflito...

      Excluir
  46. Obrigada Elaine me ajudou e muito!
    Sempre pensando em nós...
    Beijos

    ResponderExcluir
  47. Olá Elaine! Tenho o código das postagens relacionadas instalados, mas mudei de domínio e quando clico nas imagens das postagens relacionadas elas apontam para o antigo endereço e aparece que a postagem não existe. Sabe dizer como posso resolver este problema? Tenho que mexer em algo no código? Aguardando um socorro!!

    ResponderExcluir
    Respostas
    1. Valéria, se você usa o Linkwithin ele não vai mesmo aceitar a troca. Não sei o motivo mas quando trocamos de domínio ele não lê o novo endereço.
      Sugiro que o retire e tente instalar esse do tutorial.
      Espero que dê certo...

      Excluir
  48. olá ,primeiramente quero Parabenizar pelo Blog que é show ..Gostaria de saber se é possível, configurar os códigos , para que os links abram numa nova guia do navegador , quando alguém clicar sobre eles ou na imagens ..

    ResponderExcluir
    Respostas
    1. Eu nunca tentei, mas pesquise aqui no blog o termo "abrir links em nova aba".
      Tem um código lá que pode ser aplicado ao blog todo, talvez ajude :)

      Excluir
  49. No meu não deu certo, a imagem ficou gigante.

    ResponderExcluir
  50. Ai Eliane, no meu blog de testes não deu certo. Acho um recurso tão essencial, tenho tentado tanto. Não aparece nada. Acho que vou ter que rever tudo lá no HTML ou criar um outro blog de testes...

    ResponderExcluir
    Respostas
    1. Regina, releia o tutorial, podes ter esquecido de algo...

      Excluir
  51. Oi Elaine,
    Não sei se vc verá essa postagem mas vamos lá. Primeiro quero agradecer e dizer que a maioria das alterações que fiz no meu blog deram certo graças a vc!
    Agora, tentei fazer essa alteração e não aparece nada. Ja tentei tudo que vc imaginar. Se vc puder me ajudar, te agradecerei um tanto!
    kessiaartecomamor.blogspot.com
    Muitos bjs e obrigada!

    ResponderExcluir
    Respostas
    1. Kessia, minha melhor sugestão é que você releia o tutorial e veja se não esqueceu nada.
      Também precisa que seu blog tenha os feeds ativados corretamente.
      Experimente de novo, pode ter havido algum conflito...
      E não esqueça de colocar o terceiro código. Vi que você aparentemente não colocou ou não colocou no lugar certo...
      Releia tudo pra ver se não está esquecendo isso...

      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…