» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Lista de Posts Relacionados no Fim do Post

Recebi uns e-mails perguntando como fiz para colocar a lista de posts relacionados no fim dos posts. Este recurso é legal, porque ajuda o leitor a encontrar mais posts relacionados ao que ele se interessou baseado no marcador que escolhemos para os posts!
Como este blog é para ajudar aos blogueiros a melhorar seus blogs e aprimorar com recursos legais.
Encontrei o tutorial no blog do Paulo - Códigos Blog muito bem explicado. Pedi a ele para publicar a dica aqui e ele concordou!
Clique em continue lendo e aprenda a colocar no Fim do Post uma Lista de Posts Relacionados.
backup do template Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
Leia o tutorial até o fim e tenha certeza de ter entendido.

1º - Passo

»Faça login no blogger , clique em → "Modelo" → "Editar HTML".


»Encontre a tag </head> e cole este código acima desta tag.
<!-- Javascript Posts Relacionados -->
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] +
'</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script><!-- Fim Javascript Posts Relacionados -->

Outra Opção

» O código em LARANJA é o Javascript dos Posts Relacionados.
» COPIE as linhas em LARANJA acima COLE em um bloco de notas;
» Salve no bloco de notas em seu computador com a extensão .js no nome do arquivo - Ex: Clique em Salvar Como e escreva o nome: PostsRelacionados.js
»Hospede este arquivo em um site de sua preferência - Sugestão Googlecode →Como Hospedar Javascript no seu Googlecode - colocando o LINK fornecido por sua hospedagem onde está indicado abaixo e cole esta linha abaixo da tag </head>:
<script src='Endereço do Arquivo Java' type='text/javascript'/>
»Desta forma não haverá o risco de seus posts relacionados não funcionarem, a não ser que muitas pessoas usem o mesmo endereço do java e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

2º Passo – Ativando o Código dos Posts Relacionados

»Clique em cima do código e digite Ctrl+F:
» Procure o seguinte código:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
»Copie este código em azul abaixo:
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
» Cole entre as linhas ▼:

<b:if cond='data:label.isLast != "true"'>,</b:if>
e
</b:loop>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Observação Importante:

Para modificar a quantidade de artigos que serão exibidos.
Veja o número que está em vermelho no código acima.

» Mude o número 10 para a quantidade máxima de posts que você desejar que seja exibida.

►Esse número não indica o total de posts, mas o máximo de posts que são mostrados por cada categoria.

3º Passo – Colocando os Posts Relacionados no Final dos Posts

»Procure por [post-footer-line-3]
<div class='post-footer-line post-footer-line-3'>
ou
<div id='post-footer'>
É importante que o código fique dentro da área dos posts.
Se não encontrar esta linha exata procure por:
[post-footer-line] que pode ser line-1, line-2 ou line-3 em geral.

» Adicione este código▼ logo abaixo desta linha:
<div class='relacionados'><b:if cond='data:blog.url != data:blog.homepageUrl'><h2>Posts Relacionados</h2></b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script></div>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

→Agora quando clicar no link do post você pode ver a lista de postagens relacionadas antes dos comentários!

4º Passo – Configurando o CSS dos Links e Título dos Posts Relacionados

»Está vendo as palavras em azul Posts Relacionados?
Pois é, você pode mudar como quiser. Por exemplo: Leia mais, Continue lendo, etc…

Para editar os links dos posts relacionados e o título » Use o código CSS abaixo colando-o logo acima da linha → ]]></b:skin>
/*---Posts Relacionados---*/
.relacionados ul{padding-left:0px;}
.relacionados ul li{/*Edita os links*/
background: url(URL-imagem de setinha) no-repeat left; /*img-flecha*/
margin:5px 0; border-bottom:1px dotted $bordercolor; list-style:none;
padding:0 0 2px 20px;  color:$linkcolor; font-size: 12px;
text-indent:0px;
line-height:1em;}
.relacionados h2{/*Edita o Título*/
font-size: 18px; font-weight:bold;
}

Onde:
☺font-size→ indica o tamanho da fonte;
☺font-weight→ indica se a fonte está em negrito;
☺color→cor da fonte;
☺padding-top→indica a distância superior;
☺padding-left→indica a distância da esquerda.

Este post foi originalmente escrito em 26/04/2008 e atualizado em 17/03/2013

Fonte: Códigos Blog
Lista de Posts Relacionados no Fim do Post Lista de Posts Relacionados no Fim do Post Reviewed by Áurea on 3/17/2013 Rating: 5

30 comentários:

  1. Aee muito obrigado meu ajudou muito mesmo.
    Tem uma pequena dúvida como que muda a cor do texto Post Relacionados?

    Que nem você fez no seu.

    Desculpa a perturbação.

    Abraços

    Renato;

    ResponderExcluir
  2. oi, olha eu aqui novamente.
    BOm queria saber tem como colocar post relacionado embaixo de todas as postagens, sem precisar clicar no post para aparecer, tipo esse anúncio do google que você usa.

    Entendeu?

    Obrigado

    ResponderExcluir
  3. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  4. Ises e Raoni,
    Fiz a atualização do post e testei!
    Agora não tem mais problema com o 6º passo.
    Pode aplicar ao seu blog!
    Áurea

    ResponderExcluir
  5. Que maravilha, muito bom, testado e aprovado com sempre.

    ResponderExcluir
  6. Eu não encontro o código do 8º passo.
    Por favor se alguém souber me responder.

    ResponderExcluir
  7. Testado e aprovado isto é super útil, faz com que os visitantes fiquem mais tempo no blog

    ResponderExcluir
  8. Essas coisas nunca dão certo comigo!!
    Nunca encontro os códigos bem iguizinhos!!
    :(((

    ResponderExcluir
  9. Aos que tiveram problemas,
    Meus amores, leiam com calma, procurem apenas uma parte do código usando as teclas Ctrl+F. Este post já foi testado e até atualizado para ficar melhor para vocês.
    Se ainda assim não der. Insitam em me perguntar que tentarei ajudar de outra forma, mas insistam, porque meu tempo é curto.

    Aos que não tiveram problemas,
    Fico muito feliz em ajudar! Obrigada por gostar daqui!

    Bjks a todos

    ResponderExcluir
  10. Nao da pra passar da etapa 8.
    só se for template desse blog só ele tem essa linha!!!

    ResponderExcluir
  11. Caca Você tentou usar o Ctrl+F e procurar apenas partes da linha? E também se esta linha não tiver encontre a linha do post-footer-line-2 você pode adicionar o hack abaixo dela também.

    ResponderExcluir
  12. Tive que alterar o 9 passo para:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    </b:if>

    <script type='text/javascript'>

    removeRelatedDuplicates();

    printRelatedLabels();

    </script>

    Pois aparecia as escritas "Leia Mais..." nas páginas anteriores na navegação.

    ResponderExcluir
  13. olá eu segui certinho a dica e tal ela está "funcionando"porem os artigos não aparecem abaixo da dela! só fica o nome Posts Relacionados e num aparece mais nada!!! obrigado!

    ResponderExcluir
  14. Fiz td certinho, e ficou jóia!
    Mto obrigado! Sucesso!

    ResponderExcluir
  15. @Denilson Vou vericar sua alteração! Obrigada pela dica!

    @Por mim tudo bem Verifique se o problema não está com o javascript.

    @' ॐ п α п δ σ ॐ ' Fico feliz que tenha dado certo! Seja sempre bem vindo!

    ResponderExcluir
  16. @Administrador Realmente seu template não tem a linha post-footer-line, mas você pode incluir os posts relacionados acima da tag <div id="comment" class="comments"> do seu template. Tente e me fale se deu certo.

    ResponderExcluir
  17. Olá, obrigado por responder!

    Procurei essa tag também em todo o template e não encontrei! Não tem nada que passe nem perto disso, mas mesmo assim muito obrigado pela sua disposição!

    ResponderExcluir
  18. @Administrador Não precisa procurar exatamente como coloquei. Procure por partes use o Ctrl+F para procurar. Por exemplo digite: id="comment" e verifique se está associado a class="comments". Outra coisa: use ' ao invés de " pode dar certo.

    ResponderExcluir
  19. Ei, obrigada pela dica.
    Já coloquei no meu blog ;)

    ResponderExcluir
  20. No temoplate que as variaveis define a cor e o estilo dos links a formatação .posts-relacionados.. não funcionará. o retante fica tudo ok. Uma dica: é aconselhável aos iniciantes colocar o java script no próprio blog e não hospedar em outro site pois caso ocorra um problema com o site de hospedagem o script não funcionará.

    ResponderExcluir
  21. @Gustavo Obrigada por sua contribuição Gustavo. Seja sempre bem vindo.

    ResponderExcluir
  22. Olá,

    Como eu identifico a parte do código abaixo em “Expandir modelos de widgets” na nova interface do blogger, não consigo identificar.






    ,



    Pode me ajudar?

    Obrigada

    ResponderExcluir
    Respostas
    1. Olá Aline,
      Procure por uma das linhas do bloco de códigos.
      Ex: <b:if cond='data:post.labels'>
      Compare se o código é o mesmo e continue a configuração.
      Obs: Atualizei o artigo porque não existe mais "Expandir modelos de widgets". Seu comentário me chamou atenção para atualizá-lo. Obrigada!
      Seja bem vinda!

      Excluir
  23. No meu blog não aparecem as imagens nos posts relacionados... o que faço?

    ResponderExcluir
    Respostas
    1. Henrique,

      Este tutorial é para apenas a lista de posts relacionados sem imagem. Você precisa aplicar um hack que ensina a colocar os posts relacionados com imagens.
      Você terá que tirar este hack e instalar outro.

      Excluir
  24. Eu já uso o "Posts Relacionados" a algum tempo, entretanto eu tive que excluir uns artigos e verifiquei que eles continuam aparecendo no blog. Tem como eu resolver isso, como atualizando alguma coisa relacionada com o conteúdo, por exemplo?

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.