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:
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&callback=related_results_labels&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 == "item"'> Posts Relacionados</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
Valeu Paulo!!!! Excelente dica!
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.
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
ResponderExcluirMarque a caixa "expandir modelos de widget"
ResponderExcluirola amigo pocha conseguir.
ResponderExcluirmuito obrigado pela dica
pocha ate que fim encontrei um tutorial que realmente me ajudou, ate aqui eu nao tinha conseguido encontrar. valeu.
ResponderExcluirJuliana, 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!
ResponderExcluiropa 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)
ResponderExcluirAcontece mesmo depois que eu marco a caixa "expandir modelos de widget"
Obrigado Dra. Juliana,
ResponderExcluirFuncionou de primeira em meus 3 blogues com o Template oriundo do Mínima. Obrigado e parabéns pelo Dicas Blogger.
Muito bom tutorial,,, parabéns vale um click nos anuncios do google..!!!!!!
ResponderExcluirAbraços
Dr. Chicletinho
Olá, no meu blog aparece apenas o nome: "Posts Relacionados" e só, nennhum post relacionado aparece.
ResponderExcluirPoderia verificar o problema. Reparei que fica exatamente como esta nesse seu post, apenas o nome Post relacionado e nenhuma lista de posts relacionados.
Boas, já a algum tempo que procurava isto!!!
ResponderExcluirSó 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
OLá Juliana, muito obrigado pelas facilidades que vocês nos proporcionam.
ResponderExcluirOlá Juliana, fiz tudo certinho mas as matérias relacionadas não apareceram não. Apenas aparece "Posts Relacionados" :(
ResponderExcluirPoderia me ajudar nisso? Muito obrigado!
Cara, ficou SHOW DE BOLA...Deu tudo certo e minhas postagens ficaram mais completas. Abraço forte. Do seu novo amigo Japa.
ResponderExcluirDá sim, japaneves tens é que abrir só a pag. do post´, se abrires com mais de um post´já não aparece.
ResponderExcluirE ai Juliana, já conseguiu encontrar solução para o meu pedido?
Bx.
...qual seria o seu pedido?
ResponderExcluirAos que tiveram dificuldades:
ResponderExcluirsigam rigorosamente o tutorial pois dá certinho.
Boas Juliana,
ResponderExcluirNuma 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
Juliana,
ResponderExcluirprimeiramente 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
Segui todos os passos e no meu blog não aparece NADA!
ResponderExcluirOlá Juliana,
ResponderExcluirVc anda por aí?
Em relação ao meu já famoso pedido... já consegui.
Continue o seu bom trabalho, e... obrigado na mesma.
Oi Juliana, td bem?
ResponderExcluirFiquei 4 horas seguidas, tentando com outras dicas.
Quando tentei a sua, conseguí em menos de 5 minutos.
Valeu !!!!!!
Vc é ótima.
Beijokinhas
Vassourando
Parabéns pelo tutorial, consegui fazer em menos de 3 minutos, vc e seu blog estão sempre nos ajudando!
ResponderExcluircriei 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
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.
ResponderExcluirOlá!
ResponderExcluirVeja se agora dá certo.
Abraços
help !!!
ResponderExcluirpelo 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 ;/
funcionou !!!!!!!!
ResponderExcluirnao acredito este eh o unico tutorial que funciona sendo que eh o mais facil que existe na net pqp !
to emocionado !!!!
valeuuuuuuuuuuuuuuuuuuuuuu!
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 !
ResponderExcluirdai 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 ?
Obrigada pelos elogios. Me manda um email que explico como faz. Abraços
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirOlá,
ResponderExcluirFreedownloads recebi vários emails seus hoje, envia pro email downloadsound@msn.com que eu respoderei assim que puder!
abraços
www.downloadsound.blogspot.com
Muito bom!!!
ResponderExcluirvalew
Segui o tutorial não deu erro, mas os posts relacionados não aparecem!
ResponderExcluirDesculpa, eu sou meio anta pra essas coisas... deu certo sim. Valeu!
ResponderExcluirA só tenho uma dúvida.
Apareceram trocentos links pra posts relacionados.
Não tem como diminuir? Deixar uns 3 ou 4.
Jean depende do post. Se vc tiver muitos marcadores em um mesmo post vai aparecer mais mesmo. Abraços
ResponderExcluirPro pessoal q procurou e não achou o código do 8º passo, tenta procurar:
ResponderExcluir<*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
Fiz o tuto passo a passo, mas....
ResponderExcluirO 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??
O codigo nao esta funcionando no meu blog.
ResponderExcluirAlguma dica??
Já refiz o que esta aqui 4 vezes.
http://danielnegrisoli.blogspot.com
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á!
ResponderExcluirno meu nao tem o codigo do 8º passo ja espandi modelos e nao aparece
ResponderExcluirOlá, 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.
ResponderExcluirAbraços!
http://recomendandosites.blogspot.com
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?
ResponderExcluirhttp://recomendandosites.blogspot.com
poxa naum consegir!
ResponderExcluirtem como utilizar este código mas sem mostrar os marcadores da postagem, deixando-os oculto?
ResponderExcluirOlá. Não consigo achar os códigos indicados no passo 5. Mesmo expandinmdo os widgets, como indicado no passo 4.
ResponderExcluirAlguma dica?
Uso a versão nova do blogger (blogspot) com o template padrão Snapshot.
Muito obrigado Juliana! Parabens pelo post!
ResponderExcluirOlha, 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!
Muito obrigado, ficou super bom, agora nossos visitantes poderam ver os posts relacionados sem nenhuma complicação. Parabéns pelo blog.
ResponderExcluirOla Juliana tudo bem ?
ResponderExcluirteria como colocar para os posts relacionados aparecerem na pagina inicial ?
mesmo se nao tiver como
Obrigado, ja ajudou bastante ;)
Oi, Juliana!
ResponderExcluirDeu 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. ^^
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):
ResponderExcluir<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.
Esqueci de dizer: quando entro na postagem vejo só o título "Posts relacionados" e não vem post nenhum, apesar dos marcadores, etc.
ResponderExcluirObrigado
Muito bom, parabéns e obrigado.
ResponderExcluirObrigada! Deu certinho mesmo. Tinha tempo que queria colocar isso no blog.
ResponderExcluirobrigado pelo belo posts, pois só aqui eu conseguir colocar com êxito o código de posts relacionados em meu blog, abraço!
ResponderExcluirOpa 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!
ResponderExcluirAbraços!
É, agora que eu estou passando notei que é o mesmo do usuário compulsivo e possui o mesmo erro.
ResponderExcluirComo você faz para seus artigos relacionados aparecerem apenas 5 mesmo com vários marcadores? Aqui ele inclui +5 artigos para cara marcador. :|
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!
ResponderExcluirObrigado pela compreensão e abraços!
Acabei de usar este hack em um novo template e está ok.
ResponderExcluirFicou muito bom vejam no meu revistamega.blogspot.com
ResponderExcluirvleuuuuuuuuuuuuu funfou
ResponderExcluirPro 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
Olá!
ResponderExcluirNã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!
Valeu Cara, hiper dicas!!!
ResponderExcluirBombou geral em todos q utilizei
Excelente site...Abraços!!!
Oi, tudo bem?
ResponderExcluirPassei 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!
Juliana...
ResponderExcluirVim agradecer pela dica olha deu tudo certo
valeu mesmo olha seu blog é muito bom parabéns