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'>6º - Cole este código antes do </b:loop> :
<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>
<b:if cond='data:blog.pageType == "item"'>7º - Salve o template!
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=5"'
type='text/javascript'/>
</b:if>
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>10º - Salve o template. Agora quando clicar no link do post você pode ver a lista de postagens relacionadas antes dos comentários!
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
Tutorial de: Blosque com algumas modificações.





25 de fevereiro de 2008 03:12
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
25 de fevereiro de 2008 11:53
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
26 de fevereiro de 2008 01:22
Não está dando certo para colocar o ultimo codigo.
E agora?
26 de fevereiro de 2008 21:21
Foi mau pessoal!!
Código arrumado!
abraços
27 de fevereiro de 2008 19:28
Valeu garoto!!!!
Paulo posso postar no Dicas Blogger, com os devidos créditos? Bjs
27 de fevereiro de 2008 20:14
Paulo, venho só dizer para passar no Blogmania(http://maniablogs.blogspot.com). Há lá um um même para ti.
Um abraço
2 de março de 2008 17:10
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
4 de março de 2008 20:17
Willian!
Já ta add no código!
=D
6 de março de 2008 17:52
impressionante cara a cada dia seu blog tá melhor...valeu pelo tutorial!
7 de março de 2008 10:53
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!
15 de março de 2008 18:16
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
15 de março de 2008 18:19
Tem que colocar a url do Blog em algum lugar?
Vlw
16 de março de 2008 16:11
Felipêra:
não tem que mudar nada! Isso é alguma coisa que você fez errado.
=[
18 de março de 2008 22:32
qdo chego no 8° eu naum consigo localizar o codigo... oq faço??
20 de março de 2008 19:29
Thomas:
Busque algo parecido!
Que tenha isso:
post-footer-line post-footer-line-3
e faça, teste sempre antes!!
abraços
18 de abril de 2008 01:14
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?
26 de abril de 2008 12:01
Matheus:
salva o template e depois procura algo parecido, e tenta, se não der vocÊ tem o template salvo.
abraços
27 de abril de 2008 06:00
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.
29 de abril de 2008 03:51
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
12 de junho de 2008 18:16
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.
20 de julho de 2008 21:58
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!
21 de julho de 2008 00:08
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
9 de setembro de 2008 19:59
cara como faço para no lugar das bolinhas no lado do texto, colocar uma imagem? vaaaleu
16 de setembro de 2008 22:34
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!
18 de setembro de 2008 15:23
Paloma...
É porque não tem post relacionado! rsrsrs
27 de novembro de 2008 19:10
Muito Obrigado Amigo !
Ja estou usando !
16 de janeiro de 2009 08:53
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!
26 de janeiro de 2009 21:16
Não consegui...
8 de fevereiro de 2009 02:59
Muito legal!
Parabéns!!!
12 de fevereiro de 2009 22:21
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.
13 de fevereiro de 2009 12:27
=))
6 de maio de 2009 12:18
deu certinho! valeu!
:)
12 de maio de 2009 16:39
Show de bola! Obrigada por esta dica!
Já usei no meu blog e deu certinho!
Obrigada
7 de junho de 2009 04:45
Caraaaa perfeitooo... vcs salvara, minha vidaaa...
abraços....
quem quizer conhecer meu blog aqui...
www.neodownload.org
ja add a favoritos...
16 de junho de 2009 12:38
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
17 de junho de 2009 10:45
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.
19 de junho de 2009 17:01
mmuuito bom cara
8 de julho de 2009 19:50
#Tarlei...
Isso é configuração do seu template.
9 de julho de 2009 16:32
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!!!
10 de julho de 2009 01:21
Boa noite! Meu template não possui o post-footer-line. Vc poderia me ajudar?? Desde já agradeço imensamente
15 de julho de 2009 19:12
otimo cara
to usando ja
brigadao
19 de julho de 2009 21:02
Tb nao achei a linha da etapa 8 e nem algo relacionado com ela...
20 de julho de 2009 12:46
Procure só por: post-footer-line post-footer-line-3
24 de julho de 2009 04:11
Muito obrigado, ajudou MUITO
25 de julho de 2009 05:07
Problemas. Nem o nome "posts relacionados" aparece nem aparece post relacionado algum.
http://jornalrpgmaker.blogspot.com/
Até.
9 de agosto de 2009 22:36
Paulo, fiz tudo como pediu, mas não aparece... O que pode ter acontecido??
18 de agosto de 2009 09:03
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!
20 de agosto de 2009 02:47
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!
24 de agosto de 2009 20:16
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?
7 de setembro de 2009 19:40
@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.
16 de setembro de 2009 12:25
A única dificuldade que tive foi em um código que era pedido
"true"
E no meu constava:
"e;true "e;
Eu simplesmente troquei para o que seu post pedia e assim deu certinho.
Abs
20 de setembro de 2009 19:04
Poo cara aki deu certoo, Shoow Briigadoo
16 de outubro de 2009 10:42
Paulo, blz
O meu não tem o codigo 5, sabe pq?
Otimo Blog
17 de outubro de 2009 12:50
@Tiago,
Tente procurar algo parecido. Isso todo template tem...
abraços
20 de outubro de 2009 11:04
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?
22 de outubro de 2009 18:14
@Tiago,
Não é possível. =[
30 de outubro de 2009 20:46
o cara vlw!
eu quase consegui fazer!
mas quando chegou na parte 8 eu nao achei!
me ajude!
7 de novembro de 2009 05:26
eu estava precisando desse^^
10 de novembro de 2009 22:08
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.
28 de novembro de 2009 13:34
Muito obrigado...o único que funcionou.
Eu queria saber se é possível mudar a cor dos links e como?
3 de dezembro de 2009 11:50
Uma exlente dica parabéns!!
No meu blog deu tudo certo.
Vlw.!!!
20 de dezembro de 2009 00:47
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!!
21 de dezembro de 2009 15:44
No meu blog ñ tem a linha do Passo 8
o que eu faço?
29 de dezembro de 2009 01:23
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?
2 de janeiro de 2010 23:17
Tem como colocar post relacionados com imagens? Como aparece em alguns blogs?
10 de janeiro de 2010 01:46
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? :\
21 de janeiro de 2010 15:53
Aqui também não tem o passo n°8
24 de janeiro de 2010 03:41
muito bom valeu
gosteu
ajudo muito eu estava procurando ja um tempo
27 de janeiro de 2010 10:09
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.
31 de janeiro de 2010 05:00
Como eu faço para determinar uma quantidade de posts relacionados?
14 de fevereiro de 2010 21:47
Valeu pela dica. Segui todos os passos e não tive problemas.
20 de fevereiro de 2010 11:40
@Michel,
no código do passo 6.
Procure o número:
results=5
Mude o 5 pelo número que quiser.
12 de março de 2010 20:55
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"
4 de maio de 2010 10:24
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!
17 de maio de 2010 16:39
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???
20 de maio de 2010 17:37
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
17 de junho de 2010 20:19
ola eu fiz tudo certinho mais nao esta aparecendo os posts relacionados antes dos comentario porque, tem outro modo de fazer?
7 de julho de 2010 22:00
Vlw mano, funciono direitinho aqui
8 de agosto de 2010 20:34
Ajudou muito !!