Código para Posts Relacionados

Código para Posts Relacionados

6 10 99
Código para Posts Relacionados 10 6 99

Super dica que vi no Blog do meu amigo Paulo Estevão, do Códigos Blog.

Pedi sua autorização para publicar e ele, prontamente, concordou.

É um tutorial para inserir os Posts Relacionados no Blogger.

Colocando este código no layout do nosso blog, ao final de cada post, aparecerão links de posts com assuntos semelhantes, baseados nos "marcadores",o que facilitará a navegação dos nossos leitores.

Exemplo:

smile_teeth

Vamos lá?

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!


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.pageType == &quot;item&quot;'> Posts Relacionados</b:if>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>


Valeu Paulo!!!! Excelente dica!

Post original aqui

Aí pessoal, podem fazer sem medo. Deu certinho!


Os comentários para este post estão desabilitados. Em caso de dúvidas, por favor, dirija-se ao nosso fórum.

63 Comments
Comments
  1. opa vc poderia me ajudar eu consigo fazer ate o 7º passo , mas quando eu chego no 8º passo eu nao encontro o condigo < p class='post-footer-line post-footer-line-3'/ > no meu template , ele tem um outro nome ?? obrigado

    ResponderExcluir
  2. Marque a caixa "expandir modelos de widget"

    ResponderExcluir
  3. ola amigo pocha conseguir.
    muito obrigado pela dica

    ResponderExcluir
  4. pocha ate que fim encontrei um tutorial que realmente me ajudou, ate aqui eu nao tinha conseguido encontrar. valeu.

    ResponderExcluir
  5. Juliana, finalmente consegui fazer o que propõe o post. Agradeço pela ajuda e convido você a visitar meu blog. Está em fase de construção e, creia, você tem ajudado nisso. Boa semana!

    ResponderExcluir
  6. opa vc poderia me ajudar eu consigo fazer ate o 7º passo , mas quando eu chego no 8º passo eu nao encontro o condigo < p class='post-footer-line post-footer-line-3'/ > no meu template , ele tem um outro nome ?? obrigado(2)
    Acontece mesmo depois que eu marco a caixa "expandir modelos de widget"

    ResponderExcluir
  7. Obrigado Dra. Juliana,
    Funcionou de primeira em meus 3 blogues com o Template oriundo do Mínima. Obrigado e parabéns pelo Dicas Blogger.

    ResponderExcluir
  8. Muito bom tutorial,,, parabéns vale um click nos anuncios do google..!!!!!!

    Abraços

    Dr. Chicletinho

    ResponderExcluir
  9. Olá, no meu blog aparece apenas o nome: "Posts Relacionados" e só, nennhum post relacionado aparece.
    Poderia verificar o problema. Reparei que fica exatamente como esta nesse seu post, apenas o nome Post relacionado e nenhuma lista de posts relacionados.

    ResponderExcluir
  10. Boas, já a algum tempo que procurava isto!!!

    Só precisso de uma ajuda sua... é que os post relacionados ficaram todos do lado direito da caixa e eu gostaria que ficassem do lado esquerdo.

    E possivel dar uma ajuda!?

    Obrigado

    ResponderExcluir
  11. OLá Juliana, muito obrigado pelas facilidades que vocês nos proporcionam.

    ResponderExcluir
  12. Olá Juliana, fiz tudo certinho mas as matérias relacionadas não apareceram não. Apenas aparece "Posts Relacionados" :(

    Poderia me ajudar nisso? Muito obrigado!

    ResponderExcluir
  13. Cara, ficou SHOW DE BOLA...Deu tudo certo e minhas postagens ficaram mais completas. Abraço forte. Do seu novo amigo Japa.

    ResponderExcluir
  14. Dá sim, japaneves tens é que abrir só a pag. do post´, se abrires com mais de um post´já não aparece.

    E ai Juliana, já conseguiu encontrar solução para o meu pedido?

    Bx.

    ResponderExcluir
  15. Aos que tiveram dificuldades:
    sigam rigorosamente o tutorial pois dá certinho.

    ResponderExcluir
  16. Boas Juliana,

    Numa resposta anterior a este post´eu tinha-lhe pedido ajuda, pois, esta a dar tudo certinho no meu blog a unica falha é que o alinhamento dos post´relacionados está a ser feito à direita e, se ficar à esquerda fica com melhor apressentação.

    Bx.

    Obrigado

    ResponderExcluir
  17. Juliana,

    primeiramente seu blog é muito show de bola, porém segui todas as instruções, mas no meu no html do meu blog, não há a linha:

    p class='post-footer-line post-footer-line-3

    a que mais se aproxima é

    div=class='post-footer-line post-footer-line-3

    nao consigo salvar, como posso resolver isto?

    grato

    www.moteta.blogspot.com

    ResponderExcluir
  18. Segui todos os passos e no meu blog não aparece NADA!

    ResponderExcluir
  19. Olá Juliana,

    Vc anda por aí?

    Em relação ao meu já famoso pedido... já consegui.

    Continue o seu bom trabalho, e... obrigado na mesma.

    ResponderExcluir
  20. Oi Juliana, td bem?
    Fiquei 4 horas seguidas, tentando com outras dicas.

    Quando tentei a sua, conseguí em menos de 5 minutos.
    Valeu !!!!!!
    Vc é ótima.

    Beijokinhas
    Vassourando

    ResponderExcluir
  21. Parabéns pelo tutorial, consegui fazer em menos de 3 minutos, vc e seu blog estão sempre nos ajudando!

    criei meu blog tem 3 dias no máximo e ainda não estou muito por dentro de tudo, mas...sempre vejo as pessoas pedindo para fazer parceria, se te enteressa entra em contato comigo, no meu blog tem o contato.

    abraços

    ResponderExcluir
  22. Oi, Juliana segui seu tutorial certinho e deu certo, so tem um problema os post relacionados não aparecem, so o post relacionados e mais nada.

    ResponderExcluir
  23. Olá!
    Veja se agora dá certo.
    Abraços

    ResponderExcluir
  24. help !!!
    pelo amor de deus
    ja fiz esse tutorial de varias fontes diferentes umas 10 vezes ja em varios templates diferentes este foi o primeiro que não deu erro mas mesmo assim nao funcionou deve ter alguma pragaa ou algo maior q nao deixa eu inserir este hack no meu blog ;/

    ResponderExcluir
  25. funcionou !!!!!!!!
    nao acredito este eh o unico tutorial que funciona sendo que eh o mais facil que existe na net pqp !
    to emocionado !!!!
    valeuuuuuuuuuuuuuuuuuuuuuu!

    ResponderExcluir
  26. desculpa aew ta enxendo de comentário nas eu queria botar la no meu blog este post também pq eh o unico descente que existe na internet brasileira !

    dai tpw na hora q vou botar os codigos dentro da caixinha eles ficam tudo junto e nao fica vermelho como faço pra dexa igual no seu post ?

    ResponderExcluir
  27. Obrigada pelos elogios. Me manda um email que explico como faz. Abraços

    ResponderExcluir
  28. Este comentário foi removido pelo autor.

    ResponderExcluir
  29. Olá,

    Freedownloads recebi vários emails seus hoje, envia pro email downloadsound@msn.com que eu respoderei assim que puder!

    abraços

    www.downloadsound.blogspot.com

    ResponderExcluir
  30. Segui o tutorial não deu erro, mas os posts relacionados não aparecem!

    ResponderExcluir
  31. Desculpa, eu sou meio anta pra essas coisas... deu certo sim. Valeu!
    A só tenho uma dúvida.
    Apareceram trocentos links pra posts relacionados.
    Não tem como diminuir? Deixar uns 3 ou 4.

    ResponderExcluir
  32. Jean depende do post. Se vc tiver muitos marcadores em um mesmo post vai aparecer mais mesmo. Abraços

    ResponderExcluir
  33. 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.

    aqui funfo legal podem conferir !

    Monsters of Metal - The Metal/Rock Radio! 24 hrs Online!
    http://radio-mom.blogspot.com

    ResponderExcluir
  34. Fiz o tuto passo a passo, mas....
    O blogger dá erro e não me deixa salvar a alteração, se tiro as alterações ele funciona...
    Sabe o que pode ser isso??

    ResponderExcluir
  35. O codigo nao esta funcionando no meu blog.
    Alguma dica??
    Já refiz o que esta aqui 4 vezes.
    http://danielnegrisoli.blogspot.com

    ResponderExcluir
  36. to com a mesma dúvida do Jean, aparecem muitos posts relacionados, não há no código alguma variável de máximo de posts q aparecem?? Obrigado desde já!

    ResponderExcluir
  37. no meu nao tem o codigo do 8º passo ja espandi modelos e nao aparece

    ResponderExcluir
  38. Olá, uma dúvida, no meu blog os artigos relacionados ficam alinhados na direita... como eu deveria proceder para colocá-los alinhados na esquerda? Se possivel, responda-me no meu blog.

    Abraços!

    http://recomendandosites.blogspot.com

    ResponderExcluir
  39. Segunda dúvida, no meu site eu tive de retirar temporariamente o código dos posts relacionados porque ao exibir historico ou por marcadores, a palavra "Artigos relacionados" aparecia abaixo de todas as postagens mesmo sem eu entrar no post. O que estaria dando este bug?

    http://recomendandosites.blogspot.com

    ResponderExcluir
  40. tem como utilizar este código mas sem mostrar os marcadores da postagem, deixando-os oculto?

    ResponderExcluir
  41. Olá. Não consigo achar os códigos indicados no passo 5. Mesmo expandinmdo os widgets, como indicado no passo 4.

    Alguma dica?

    Uso a versão nova do blogger (blogspot) com o template padrão Snapshot.

    ResponderExcluir
  42. Muito obrigado Juliana! Parabens pelo post!
    Olha, eu segui tudo certinho. De fato, apareceu "posts relacionados".. so que dentro do link "links para esta postagem"....tipo, para aparecer o posts relacionados o visitante tem que clicar primeiro em links para esta postagem.
    Não tem como deixar o posts relacionados sempre a mostra no final de cada post? Sem precisar clicar em links relacionados?

    Aguardo!

    ResponderExcluir
  43. Muito obrigado, ficou super bom, agora nossos visitantes poderam ver os posts relacionados sem nenhuma complicação. Parabéns pelo blog.

    ResponderExcluir
  44. Ola Juliana tudo bem ?

    teria como colocar para os posts relacionados aparecerem na pagina inicial ?
    mesmo se nao tiver como
    Obrigado, ja ajudou bastante ;)

    ResponderExcluir
  45. Oi, Juliana!

    Deu supercerto aqui no meu blog, ficou no centro, abaixo dos marcadores, show!

    Obrigada pela dica.

    A minha dúvida é: como é que ele relaciona os posts? Pelas tags? É uma pergunta meio estúpida,né? Desculpa. ^^

    ResponderExcluir
  46. Juliana, a dica está muito boa. No entanto, tenho o mesmo problema de alguns que comentaram aqui. Quando chego no 8° passo não acho a linha <p class='post-footer-line post-footer-line-3'/> . E segui religiosamente o tutorial! Vi que você disse à um dos que reportou este problema para não esquecer de clicar no botão Expandir modelos de widgets . No entanto, eu havia feito isso certinho. Pensei que talvez o código a seguir fosse o substituto do outro no meu template (que tem o modelo básico do Rounders2):

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

    Então colei o código recomendado depois desta linha, de modo que ficou assim:

    <div class='post-footer-line post-footer-line-3'/><b:if cond='data:blog.url != data:blog.homepageUrl'>Postagens Relacionadas</b:if>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script></div>

    No entanto, não apareceu nada nas postagens, mesmo eu indo no link da própria postagem (e tendo adicionado vários marcadores nas postagens, tudo certinho!) Espero que você me disculpe o tempo que vou tomar caso você queira ler este comentário enorme, rsrs. Mas deixei detalhadinho aí o meu problema.

    Antecipadamente, obrigado... (xD)

    Abraços,

    Alberto.

    ResponderExcluir
  47. Esqueci de dizer: quando entro na postagem vejo só o título "Posts relacionados" e não vem post nenhum, apesar dos marcadores, etc.

    Obrigado

    ResponderExcluir
  48. Muito bom, parabéns e obrigado.

    ResponderExcluir
  49. Obrigada! Deu certinho mesmo. Tinha tempo que queria colocar isso no blog.

    ResponderExcluir
  50. obrigado pelo belo posts, pois só aqui eu conseguir colocar com êxito o código de posts relacionados em meu blog, abraço!

    ResponderExcluir
  51. Opa brigadão por este artigo relacionados. Estava procurando um que funcionasse melhor quando houvesse mais marcadores e provavelmente esse vai funcionar. Eu estava utilizando um que o Usuário Compulsivo havia postado no blog dele, mas vou mudar pra esse e ver se fica melhor!

    Abraços!

    ResponderExcluir
  52. É, agora que eu estou passando notei que é o mesmo do usuário compulsivo e possui o mesmo erro.
    Como você faz para seus artigos relacionados aparecerem apenas 5 mesmo com vários marcadores? Aqui ele inclui +5 artigos para cara marcador. :|

    ResponderExcluir
  53. Também não consegui.Fiz de tudo, expandi os modelos windgets troquei p class por div class mas não deu certo, também não consegui achar no html do meu template o p class!Por favor me ajude Juliana!

    Obrigado pela compreensão e abraços!

    ResponderExcluir
  54. Acabei de usar este hack em um novo template e está ok.

    ResponderExcluir
  55. Ficou muito bom vejam no meu revistamega.blogspot.com

    ResponderExcluir
  56. vleuuuuuuuuuuuuu funfou

    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.

    aqui funfo legal podem conferir sem medoo


    www.softfacil.tk

    ResponderExcluir
  57. Olá!

    Não estou conseguindo colocar o código de número 6!

    Qdo clico em salvar, abre uma outra pagina com a seguinte mensagem:

    "Não foi possível concluir sua solicitação.

    Ao relatar esse erro ao Suporte do Blogger ou ao Grupo de Ajuda do Blogger:

    * Descreva o que você estava fazendo quando recebeu este erro.
    * Forneça o código de erro e as informações adicionais a seguir.

    bX-xuyvo5"

    Poderia me ajudar?

    Desde já agradeco

    Parabens pelo blog!

    ResponderExcluir
  58. Valeu Cara, hiper dicas!!!
    Bombou geral em todos q utilizei
    Excelente site...Abraços!!!

    ResponderExcluir
  59. Oi, tudo bem?
    Passei aqui para lhe agradecer por esta ótima dica.
    Passei por vários blogs (antes desse) procurando por isso mas todos que eu colocava dava errado...
    Muito obrigado e parabéns pelo blog!
    Sucesso pra nós!
    Até mais!

    ResponderExcluir
  60. Juliana...

    Vim agradecer pela dica olha deu tudo certo
    valeu mesmo olha seu blog é muito bom parabéns

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top