Vídeo não pode ser exibido.

Códigos Blog via Celular!

Anúncio

Posts Relacionados no blog

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 logo antes dela:
<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.

79 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


  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


  3. Não está dando certo para colocar o ultimo codigo.
    E agora?


  4. Foi mau pessoal!!
    Código arrumado!

    abraços


  5. Valeu garoto!!!!
    Paulo posso postar no Dicas Blogger, com os devidos créditos? Bjs


  6. Paulo, venho só dizer para passar no Blogmania(http://maniablogs.blogspot.com). Há lá um um même para ti.

    Um abraço


  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


  8. Willian!

    Já ta add no código!

    =D


  9. impressionante cara a cada dia seu blog tá melhor...valeu pelo tutorial!


  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!


  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


  12. Tem que colocar a url do Blog em algum lugar?
    Vlw


  13. Felipêra:

    não tem que mudar nada! Isso é alguma coisa que você fez errado.
    =[


  14. qdo chego no 8° eu naum consigo localizar o codigo... oq faço??


  15. Thomas:

    Busque algo parecido!
    Que tenha isso:

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

    e faça, teste sempre antes!!

    abraços


  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?


  17. Matheus:

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

    abraços


  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.


  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


  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.


  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!


  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


  23. cara como faço para no lugar das bolinhas no lado do texto, colocar uma imagem? vaaaleu


  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!


  25. Paloma...
    É porque não tem post relacionado! rsrsrs


  26. Muito Obrigado Amigo !

    Ja estou usando !


  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!


  28. Não consegui...


  29. Muito legal!
    Parabéns!!!


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


  31. =))


  32. deu certinho! valeu!
    :)


  33. Show de bola! Obrigada por esta dica!
    Já usei no meu blog e deu certinho!

    Obrigada


  34. Caraaaa perfeitooo... vcs salvara, minha vidaaa...

    abraços....

    quem quizer conhecer meu blog aqui...

    www.neodownload.org

    ja add a favoritos...


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


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


  37. mmuuito bom cara


  38. #Tarlei...
    Isso é configuração do seu template.


  39. 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!!!


  40. Boa noite! Meu template não possui o post-footer-line. Vc poderia me ajudar?? Desde já agradeço imensamente


  41. otimo cara
    to usando ja
    brigadao


  42. Tb nao achei a linha da etapa 8 e nem algo relacionado com ela...


  43. Procure só por: post-footer-line post-footer-line-3


  44. Muito obrigado, ajudou MUITO


  45. Problemas. Nem o nome "posts relacionados" aparece nem aparece post relacionado algum.

    http://jornalrpgmaker.blogspot.com/

    Até.


  46. Paulo, fiz tudo como pediu, mas não aparece... O que pode ter acontecido??


  47. 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!


  48. 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!


  49. 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?


  50. @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.


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


  52. Poo cara aki deu certoo, Shoow Briigadoo


  53. Paulo, blz

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

    Otimo Blog


  54. @Tiago,
    Tente procurar algo parecido. Isso todo template tem...

    abraços


  55. 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?


  56. @Tiago,
    Não é possível. =[


  57. o cara vlw!
    eu quase consegui fazer!
    mas quando chegou na parte 8 eu nao achei!
    me ajude!


  58. eu estava precisando desse^^


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


  60. Muito obrigado...o único que funcionou.

    Eu queria saber se é possível mudar a cor dos links e como?


  61. Uma exlente dica parabéns!!
    No meu blog deu tudo certo.
    Vlw.!!!


  62. 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!!


  63. No meu blog ñ tem a linha do Passo 8

    o que eu faço?


  64. 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?


  65. Tem como colocar post relacionados com imagens? Como aparece em alguns blogs?


  66. 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? :\


  67. Aqui também não tem o passo n°8


  68. muito bom valeu
    gosteu
    ajudo muito eu estava procurando ja um tempo


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


  70. Como eu faço para determinar uma quantidade de posts relacionados?


  71. Valeu pela dica. Segui todos os passos e não tive problemas.


  72. @Michel,
    no código do passo 6.
    Procure o número:
    results=5

    Mude o 5 pelo número que quiser.


  73. 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"


  74. 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!


  75. 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???


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


  77. ola eu fiz tudo certinho mais nao esta aparecendo os posts relacionados antes dos comentario porque, tem outro modo de fazer?


  78. Vlw mano, funciono direitinho aqui


  79. Ajudou muito !!

Leia antes de Comentar:

  • Os comentários deste blog são todos moderados;
  • Escreva apenas o que for referente ao tema;
  • Ofensas pessoais ou spam não serão aceitos;
  • Não faço parcerias por meio de comentários;
  • Faça comentários relevantes;
  • Para entrar em contato acesse nosso formulário de contato;
  • Obrigado por sua visita e volte sempre.

Voltar ao topo