Códigos Blog

Pesquisar este blog

Carregando...

Receba atualizações por e-mail:

Paulo Estevão
24 Fevereiro 2008 às 9:00 AM

Acabei de colocar no Códigos Blog "Posts Relacionados" antes dos comentários de cada postagem.

Simples! Nessa postagem vou ensinar como fazer...
Cuidado! Qualquer pequeno erro pode fazer que isso fique chato!

1º - Faça login no blogger , clique em "Layout" -> "Modelo" -> "Editar HTML".
Antes de tudo clique em "Baixar modelo completo", para caso tenha algum erro você tem o layout salvo.

2º - Procure (Ctrl + f) a tag </head>. Cole o seguinte código ANTES do código encontrado:

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

3º - Salve

4º -
Clique em “Expandir modelos de widgets”

5º -
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>
6º -
Cole este código antes do </b:loop> :
<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=5"'
type='text/javascript'/>
</b:if>
7º -
Salve o template!

Pronto? Infelizmente não! =D
8º - Procure esse código:
<p class='post-footer-line post-footer-line-3'/>
9º - Adicione este código logo depois:
<b:if cond='data:blog.url != data:blog.homepageUrl'>Posts Relacionados</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
10º - Salve o template. Agora quando clicar no link do post você pode ver a lista de postagens relacionadas antes dos comentários!

Tutorial de: Blosque com algumas modificações.

Receba nossos posts por feed ou email

Assinar feed

Postagens recomendadas:

94 Comentários:

  1. E ae mestre blz ??

    Cara show de bola seu blog !! Pra nos iniciantes é um paraiso...hahaha !!!

    Valeu a visita, parabens pelo blog !!

    Abraço mano...

    __________________
    Dan - Doug - Rafa
    ResponderExcluir
  2. Paulo! Eu estava trás de um tuto prá fazer isto, mas quando chego no item 9 não consigo salvar o modelo dizendo que a formatação é inadequada! Vc pode me dar um help? Bjs
    ResponderExcluir
  3. Não está dando certo para colocar o ultimo codigo.
    E agora?
    ResponderExcluir
  4. Foi mau pessoal!!
    Código arrumado!

    abraços
    ResponderExcluir
  5. Valeu garoto!!!!
    Paulo posso postar no Dicas Blogger, com os devidos créditos? Bjs
    ResponderExcluir
  6. Paulo, venho só dizer para passar no Blogmania(http://maniablogs.blogspot.com). Há lá um um même para ti.

    Um abraço
    ResponderExcluir
  7. Olá

    Gostaria de saber como faço pra colocar os posts relacionados com aquela bolinha "•" antes do nome do post

    Como aqui do CódigosBlog

    agradeço
    ResponderExcluir
  8. Willian!

    Já ta add no código!

    =D
    ResponderExcluir
  9. impressionante cara a cada dia seu blog tá melhor...valeu pelo tutorial!
    ResponderExcluir
  10. Perfeito!
    Deu tudo certo. Eu já tinha testado antes com outros tutoriais mas estava dando erro direto.
    Teria como colocar estes posts relacionados na página inicial?
    Abraços!
    ResponderExcluir
  11. Eu coloquei esse código, mas não aparece nenhum post relacionado. Só aparece "posts relacionados".
    Não sei se fiz alguma coisa errada...
    Vlw
    ResponderExcluir
  12. Tem que colocar a url do Blog em algum lugar?
    Vlw
    ResponderExcluir
  13. Felipêra:

    não tem que mudar nada! Isso é alguma coisa que você fez errado.
    =[
    ResponderExcluir
  14. qdo chego no 8° eu naum consigo localizar o codigo... oq faço??
    ResponderExcluir
  15. Thomas:

    Busque algo parecido!
    Que tenha isso:

    post-footer-line post-footer-line-3

    e faça, teste sempre antes!!

    abraços
    ResponderExcluir
  16. Realmente não consigo achar o:
    post-footer-line post-footer-line-3

    ele não o encontra. Não sei oque faze, pode ter algo a ver com o meu layout?
    e pq eu não acho o código?
    ResponderExcluir
  17. Matheus:

    salva o template e depois procura algo parecido, e tenta, se não der vocÊ tem o template salvo.

    abraços
    ResponderExcluir
  18. Pro pessoal q procurou e não achou o código do 8º passo, tenta procurar:

    <*div class='post-footer-line post-footer-line-3'/*>

    sem os asterísticos!! eu coloquei pq aqui n aceita html.
    e cola o código do 9º passo normal.
    ResponderExcluir
  19. Ae parabens pelo tutorial ai heim, foi útil e eficiente, excelente blog
    quem quiser dar uma conferida como ficou é soh visitar o BLog

    http://baixem.blogspot.com

    valeus

    Add a favoritos, parabens
    ResponderExcluir
  20. o meu saiu um desatre....pode me ajudar?...dá uma olhada como ficou . tá saindo em cima dos comentários:
    http://cidadevigiada.blogspot.com/2008/06/gimp-vdeo-curso-completo-iniciante.html#links

    agradeço se puder me ajudar.
    ResponderExcluir
  21. Paulo, boa noite. Segui o seu tutorial, e deu tudo certo.
    Uma dúvida me bateu: Os posts relacionados só aparecem apenas quando se clica no link do post.
    Vejo em outros blogs que os posts relacionados também aparecem na home page.
    Teria como mexer no código para isso acontecer?
    Um abraço!
    ResponderExcluir
  22. Cidão...
    tentei tentei, não foi possível.

    Só com algum java, e java eh trem que não gosto de mexer. =[

    fico te devendo...

    abraços
    ResponderExcluir
  23. cara como faço para no lugar das bolinhas no lado do texto, colocar uma imagem? vaaaleu
    ResponderExcluir
  24. Oi Paulo,
    essa dica é boa mas bem complicada. Estou tentando fazer isso o dia inteiro. Agora eu finalmente consegui passar os problemas maiores.
    O que acontece é que quando abro um post só aparece a frase "Posts Relacionados" sem aparecer os post relacionados, entende?
    olha só o meu blog teste:http://massagemeoleos.blogspot.com/
    se vc puder me ajudar, agradeço!
    ResponderExcluir
  25. Paloma...
    É porque não tem post relacionado! rsrsrs
    ResponderExcluir
  26. Muito Obrigado Amigo !

    Ja estou usando !
    ResponderExcluir
  27. Ficou ótimo cara é facil pessoal, lembrem de expandir modelos widget antes de procurar os códigos. Vejam como ficou no meu: http://revistamega.blogspot.com/
    clica em um link qualquer e veja.
    Obrigado cara me ajudou pra caramba!
    ResponderExcluir
  28. Paulo,este pessoal ai que falaram que só aparece o no posts relacionados colocaram o código da 5º etapa em lugar errado.Esta parte do codigo existe dois trechos "/b:loop".Se colocar na parte de cima o código não funciona.
    ResponderExcluir
  29. Show de bola! Obrigada por esta dica!
    Já usei no meu blog e deu certinho!

    Obrigada
    ResponderExcluir
  30. Caraaaa perfeitooo... vcs salvara, minha vidaaa...

    abraços....

    quem quizer conhecer meu blog aqui...

    www.neodownload.org

    ja add a favoritos...
    ResponderExcluir
  31. ficou otimo ....

    so um ajuste ..

    como faço para eles irem para esquera???

    eles estao para direita....
    ver : http://livremusicagospel.blogspot.com/2009/05/adhemar-de-campos-voce-e-eu-tu-y-yo.html
    ResponderExcluir
  32. Valeu pelas dicas, somente consegui ao encontrar o código - post-footer-line post-footer-line-3 - aí sim, deu tudo certo.
    Confesso que fiquei um pouco receosa de estragar meu trabalho, mas arrisquei e funcionou.
    Parabéns por compartilhar.
    ResponderExcluir
  33. #Tarlei...
    Isso é configuração do seu template.
    ResponderExcluir
  34. Olá! Td bem?? Segui todos os passos até o último, mas meu template não tem o código <*div class='post-footer-line post-footer-line-3'/*> ou parecido. Você poderia me ajduar?? Desde já agradeço imensamente!!!
    ResponderExcluir
  35. Boa noite! Meu template não possui o post-footer-line. Vc poderia me ajudar?? Desde já agradeço imensamente
    ResponderExcluir
  36. Tb nao achei a linha da etapa 8 e nem algo relacionado com ela...
    ResponderExcluir
  37. Procure só por: post-footer-line post-footer-line-3
    ResponderExcluir
  38. Problemas. Nem o nome "posts relacionados" aparece nem aparece post relacionado algum.

    http://jornalrpgmaker.blogspot.com/

    Até.
    ResponderExcluir
  39. Paulo, fiz tudo como pediu, mas não aparece... O que pode ter acontecido??
    ResponderExcluir
  40. Paulo, pra funcionar esse código, os marcadores têm que aparecer no post?

    Explico melhor: eu tenho marcadores em todos os meus posts, mas em "Layout", "Postagens no blog" eu não selecionei a opção para que eles apareçam, entende?

    Eu até comecei a colocar o código, pois faz tempo que quero fazer isso, mas quando cheguei no 5º passo, não consegui localizar esse trecho <*b:if cond='data:post.labels'*> Seria por esse motivo?

    Gostaria de ter os posts relacionados, mas sem ter os marcadores "divulgados" no final de cada post.

    Outra coisa: tem como aumentar o número de posts relacionados? Se tem, onde eu devo alterar?

    Me ajuda, por favor... Abraço!
    ResponderExcluir
  41. Paulo, comentei aqui há uns dois dias, mas não sei o que houve com o meu comentário. De qualquer forma, vamos lá...

    Estou muito interessada em colocar esse código para exibir posts relacionados em meu blog. Dúvidas:

    - É necessário que os marcadores apareçam no rodapé do post para esse código funcionar? (no meu caso eu não gosto de "publicar" os marcadores), se tiver um jeito de não fazê-lo, eu prefiro.

    - Seria por esse motivo que não encontrei o trecho do 5º passo?

    - Tem como aumentar o número de posts listados (aqui no Códigos Blog aparecem cinco). Se tem, onde é feita essa alteração?

    Aguardo ansiosa por uma resposta... Obrigada!
    ResponderExcluir
  42. Excelente artigo, usei no meu blog e funcionou direitinho.

    Gostaria se possível de fazer criar um artigo no meu blog referente a este código, fazendo referência obviamente ao artigo original.

    Tenho a sua permissão?
    ResponderExcluir
  43. @Elaine:
    - Sim
    - Procure algo semelhante a: data:post.labels
    - Sim, no passo 6 tem um código, procure pelo número 5 e coloque o tanto o número que quiser.

    abraços

    @Ricardo:
    Se tiver os créditos direitinho, e não copiar na integra. Tudo bem.
    ResponderExcluir
  44. A única dificuldade que tive foi em um código que era pedido
    "true"

    E no meu constava:
    &quote;true &quote;

    Eu simplesmente troquei para o que seu post pedia e assim deu certinho.

    Abs
    ResponderExcluir
  45. Poo cara aki deu certoo, Shoow Briigadoo
    ResponderExcluir
  46. Paulo, blz

    O meu não tem o codigo 5, sabe pq?

    Otimo Blog
    ResponderExcluir
  47. @Tiago,
    Tente procurar algo parecido. Isso todo template tem...

    abraços
    ResponderExcluir
  48. paulo, blz

    Agora consegui, o problema é que para os post relacionado aparece o mesmo tem que clicar no titulo do post, não teria como deixar os post reacionados na pagina inicial?
    ResponderExcluir
  49. o cara vlw!
    eu quase consegui fazer!
    mas quando chegou na parte 8 eu nao achei!
    me ajude!
    ResponderExcluir
  50. Olá Paulo,
    Conheci recentemente este óptimo blog e já estou chateando.

    Coloquei todo o código e o resultado foi o seguinte:
    1- O título, que modifiquei para: "Poderá também gostar de:", ficou a um espaço das etiquetas.Quase não se vê. Como afastá-lo?
    2- A letra ficou muito pequena, É outro motivo porque quase não se vê. Como modificá-la?
    3- Pior ainda,dos posts relacionados, só aparece mesmo o que pela lógica, o visitante acabou de ler. Como resolver isto?
    4- Também gostaria de mudar a cor.

    Peço-lhe por favor, que me dê uma ajudinha.
    ResponderExcluir
  51. Muito obrigado...o único que funcionou.

    Eu queria saber se é possível mudar a cor dos links e como?
    ResponderExcluir
  52. Uma exlente dica parabéns!!
    No meu blog deu tudo certo.
    Vlw.!!!
    ResponderExcluir
  53. Paulo, parabéns pelo blog tá muitoo informativo.

    Entretanto segui todos estes passos que você descreveu nesta postagem, mas quando chega no 8º PASSO, faço tudo conforme tá escreito, e não encontro: p class='post-footer-line
    O que faço??
    Meu e-mail: matematicaporedvarton.com

    Desde já agradeço, e vou colocar seu blog como Parceiro, e isso se vc aceitar...
    Valeu!!
    ResponderExcluir
  54. No meu blog ñ tem a linha do Passo 8

    o que eu faço?
    ResponderExcluir
  55. Na parte 8 não dá certo, não acha o código e já está marcado a opção "Expandir modelos de widgets". O que eu faço?
    ResponderExcluir
  56. Tem como colocar post relacionados com imagens? Como aparece em alguns blogs?
    ResponderExcluir
  57. coloquei todos os codigos certinho. eu uso o sistema de marcadores nos posts e eles são exibidos no blog, mas mesmo assim não rola... qual será o motivo? :\
    ResponderExcluir
  58. Aqui também não tem o passo n°8
    ResponderExcluir
  59. muito bom valeu
    gosteu
    ajudo muito eu estava procurando ja um tempo
    ResponderExcluir
  60. Quem não encontrar o código do oitavo passo procure por algo semelhante ou simplismente procure por: post-footer. E cole o código depois dessa div.
    O importante é colar o código depois da postagem.

    Obs.: faça backup do template antes de modificá-lo.
    ResponderExcluir
  61. Como eu faço para determinar uma quantidade de posts relacionados?
    ResponderExcluir
  62. Valeu pela dica. Segui todos os passos e não tive problemas.
    ResponderExcluir
  63. @Michel,
    no código do passo 6.
    Procure o número:
    results=5

    Mude o 5 pelo número que quiser.
    ResponderExcluir
  64. Fiz tudo certinho, mas quando da o resultado o 1º post relacionado fica co um bug q fica quase na mesma linha da frase "Posts Relacionados"
    ResponderExcluir
  65. Meu blog não tem o post-footer-line
    Tem como adicionar isso ao blog? (o codigo post-footer-line)
    tipo, se tiver faz um tutorial!
    ResponderExcluir
  66. Ué... pq não dá certo no meu? Paro ainda no 5º passo. Não consigo achar o código mencionado, mesmo expandindo os widgets... Tentai procurar uma coisa parecida (newbie) e continuar com os passos seguintes. Apareceu uma linha "POSTS RELACIONADOS" abaixo dos posts... mas não funciona. Não tem link nenhum... #comofaz???
    ResponderExcluir
  67. Pessoal!! Não sei se eé com todos, mas quem usa o novo recurso de templates do Bloggert não está conseguindo colocar essa ferramenta. Ou seja, não é possível seguir esse tutorial.

    Obs.: Em alguns blogs o sistema não está funcionando, mas infelizmente não sei solucionar.

    []s
    ResponderExcluir
  68. ola eu fiz tudo certinho mais nao esta aparecendo os posts relacionados antes dos comentario porque, tem outro modo de fazer?
    ResponderExcluir
  69. Queria saber como consertar uma merdade que eu fiz... tentando mudar de template... o meu post ficou duplicado na página e num lugar errado... como consertar isso?

    muito grato a quem puder me ajudar...

    respostas no meu e-mail: sitoniosdesign@gmail.com
    ResponderExcluir
  70. Vi esse tutorial no Dicas blogger e adorei, seria injusto comentar no Dicas blogger, e aqui não, por isso queria dar parabéns mesmo pela ótima dica, muito boa mesmo!Ajudou no meu blog, não ocupou muito espaço no artigo, e ficou em um lugar bem legal! Abração! :)
    ResponderExcluir
  71. Não deu certo porque no meu blo nao tem essa linha no numero 8 entao nao aparece nada
    ResponderExcluir
  72. bem legal,pena não da para visualizar imagens...
    fiz no blog de texte e gostei!Obg
    ResponderExcluir
  73. Obrigada. Fiz tudo direitinho e saíu bem... no entanto não gostei do sítio onde saíu... (depois dos botões de "compartilhar"), mas como sei pouco lidar com isto... fazer alterações pode ser fatal! Há tempo que procurava esta dica, eu fazia-o manualmente em cada post e dava mto trabalho. Mas ainda não está perfeito! Eu queria, como vejo noutros blogs, que em vez dos pontos aparecesse uma imagem! será possível ajudar-me a fazê-lo? Obr. Abraço.
    ResponderExcluir
  74. Coloquei no meu blog http://dicatecnica.blogspot.com e ficou muito legal. Aumentou a quantidade de visualização de páginas

    Valeu mesmo , um abraço
    Batista
    ResponderExcluir
  75. Muito obrigado, Paulo, estava procurando a este tuto tempos e agora encontrei, vi um artigo que usar links de posts relacionados ajuda o Google a indexar o Site/Blog melhor, por isso não aconselho o LinkWithin o que você acha Paulo?
    ResponderExcluir
  76. @Kevin,
    acredito e muito que ajuda na indexação! Mais palavras-chave = melhor posicionamento no Google.
    ResponderExcluir
  77. Ei Paulo não conseguir achar o codigo do 5° item. Pode me ajudar?
    ResponderExcluir
  78. Eduardo,
    você usa marcadores em suas postagens? Tem que usar.
    abraços
    ResponderExcluir
  79. ae to presiçando demais dese codigo e num quer dar certo num sei se to pondo certo faz uma vidoe aula ae manow que e melhor godigos html se colcoar errado num funfa me add no msn faz um vidoe aula ae pelo amor de deus


    meu msn : gu_bogas2011@hotmail.com espero resposta !!!
    ResponderExcluir
  80. por que o segundo codigo oque tem que procurara na 5ª etapa não tem no meu blogger???
    ResponderExcluir
  81. @Ben,
    você usa categorias nas suas postagens? Marcadores
    Tem que usar para isso funcionar.

    abraços
    ResponderExcluir
  82. Show de Bola o código funcionou perfeitamente.. Obrigado e Sucesso ai (y'

    Abçs
    ResponderExcluir

Adicione seu comentário nesse post.
- Não aceito comentários anônimos;
- Não aceito parceria! Caso tenha uma boa proposta, entre em contato;
- Antes de pedir ajuda sobre o tutorial, tente fazer sozinho e tenha certeza que seguiu todas as etapas corretamente.
- Comentários irrelevantes não serão aceitos.

Muito obrigado por sua visita. Volte sempre!

 
 
Blogger
Muitas dicas para você usuário da plataforma Blogger
WordPress
Leia artigos sobre a plataforma de blogs WordPress
Dinheiro
Aprenda várias formas de ganhar dinheiro com seu blog
Design
Modifique e faça agora um blog moderno, único e interativo
Dicas
Várias dicas atuais de como ter um blog de sucesso
 

Onde estamos

Divulgue



Últimas Postagens