Update: A solução ideal:
Lista de Posts Relacionados no Rodapé do Post para Novo Blogger – Blogspot
Também leia esse post se você encontrou algum problema na instalação do hack.
________________________________
Como eu mencionei no post de ontem sobre a usabilidade do conteúdo, uma lista de “Posts Relacionados” no rodapé dos posts oferece vários benefícios. Alguns desses benefícios são:
- Permite ao leitor encontrar exatamente o que lhe interessa, sem ter que revirar todo o site;
-É uma excelente “isca” para que o visitante/paraquedista conheça mais o seu blog;
- Aumenta a probabilidade de que o usuário leia mais posts;
- Mantém posts mais antigos à vista;
- Melhora a navegabilidade do blog.
Para quem usa Wordpress ou outras plataformas, é muito fácil oferecer essa lista. Já o nosso querido Blogger não oferece essa opção. No entanto, já existe uma forma de implantar essa funcionalidade no novo Blogger, desenvolvida por um dos melhores hackers do Blogger – Blogspot. Antes que você pergunte, não, eu não conheço nenhuma forma de implantar “Posts Relacionados” no Blogger Clássico.
Como Exibir Uma Lista de Posts Relacionados no novo Blogger – Blogspot
Você vai ter que mexer um pouco com o código do blog. Este hack inclui a criação de um widget que vai exibir a lista. Essa não é uma opção muito prática, visto que não é possível inserir o widget no corpo dos posts. Mas não se preocupe; eu consegui melhorar o hack, para que a lista seja exibida no final do post, antes dos comentários como em qualquer outra plataforma de blog. 
Primeiro, Vamos ao Hack
Siga cada passo cuidadosamente, prestando atenção para não inserir espaços ou caracteres desnecessários. Depois de cada passo, visualize o blog para certificar-se de que está tudo certinho, e salve antes de passar ao próximo passo. Assim, será mais fácil saber onde foi que você errou, e poderá voltar atrás sem ter que fazer tudo de novo.
1 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.
2 - Procure 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 o template. Clique na caixinha “Expandir modelos de widgets”.
4 - Procure o seguinte trecho de código (certifique-se de que é esse trecho exato, existem outros parecidos):
<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>
5 - 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=10"' type='text/javascript'/> </b:if>
6 - O código deve ficar assim (a parte vermelha é o que você adicionou):
<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: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=10"'
type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
7 - Salve o template. Se você quer adicionar o widget de Posts Recentes no final da página de postagem, você precisa…
Permitir a Adição de Elementos às Postagens no Blog
- Permaneça na tab “Editar HTML”:
- NÃO clique em “Expandir modelos de widgets”. Se a caixinha estiver marcada, desmarque.
- Procure pelo código dos Posts; ele deve estar logo após o Header-wrapper. O código é este (ou alguma coisa muito parecida):
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
Simplesmente substitua “no“ por “yes“. Salve as mudanças.
Fim da Adição de Elementos às Postagens no Blog
Agora podemos continuar com o hack de Posts Recentes.
Como Criar o Widget de Posts Recentes
1 - Vá até a tab “Elementos da Página”.
2 - Você verá que agora existe um link “Adicionar um elemento de página“, sobre o campo dos posts. Clique nesse link.
3 - Escolha “HTML/JavaScript”, clicando em “Adicionar Ao Blog”.
4 – Escolha um Título – “Posts Relacionados”, “Veja Também”, o que você quiser – e cole o seguinte código no campo do Conteúdo:
<script type="text/javascript"> removeRelatedDuplicates(); printRelatedLabels(); </script>
5 - Salve as alterações. Volte para a tab “Editar HTML”. Clique na caixinha “Expandir modelos de widgets”.
6 - Procure o código do widget que você acaba de adicionar. Uma forma fácil de encontrá-lo e procurar o título que você deu ao widget, e certificar-se de que ele está dentro de uma tag <b:widget>. É algo assim:
<b:widget id='HTML13' locked='false' title='Posts Relacionados' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget>
7 - Inclua as linhas em vermelho, EXTAMENTE ONDE ESTÁ INDICADO.
<b:widget id='HTML13' locked='false' title='Posts Relacionados' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType == "item"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div>
<b:include name='quickedit'/> </b:if> </b:includable> </b:widget>
8 - Salve o template. Você já pode arrastar seu widget de Posts Recentes para onde queira; o lugar mais aconselhável é debaixo das “Postagens do Blog”. A lista só vai aparecer nas páginas de postagem – não na Home do blog.
O problema do widget é que ele fica depois dos comentários, lá embaixo, na página do post. Se você tiver muitos comentários, é provável que muitos leitores não vejam sua lista de posts relacionados. O melhor mesmo seria uma solução estândar, com a lista de posts relacionados logo abaixo do posts, não é?
Eu descobri como implantar essa solução perfeita. No entanto, você vai ter que me desculpar, mas este post já está muito longo. Amanhã eu ensino o procedimento para que você possa ter uma lista de posts relacionados como essa que você vê aí embaixo.
Fonte do Hack: Purple Moggy
O teu blog é extremamente útil, parabéns e obrigado pela ajuda.
Idem ao que o vasco coelho disse!!!
Bota útil nisso!!!
E pra o modelo clássico? :[
E para o blogger antigo? ;(
Tá, eu achei um hack de posts relacionados para o Blogger antigo!!!
Só que você é que vão ter que descobrir se funciona, porque eu não tenho nenhum blog nesse sistema, e não achei nehuma referência de algum blog que esteja usando isso.
Daqui a pouco eu posto ele, ok?
Gostei da dica estou tentando implementar isto no meu blog mas estou meio que sem tempo…esrsrs
Outro dia li sobre um plugin para WordPress que faz isso sabe qual é? Num lembro o nome….
Amplexos,
Leo Baiano.
Certo, to aguardando. :]
Vasco e Kamei: Obrigada! Qualquer hora vou fazer um banner do Blogando por Dinheiro, pra quem quiser colocar no seu blog… O que vocês acham?
Anny e Marco:Conforme o prometido, tá aqui, ó:
Hack de Posts Recentes para Blogger Clássico
Espero que funcione direitinho, vocês me contam depois.
Leo: Tem esse aqui: Related Entries
Se não gostar desse, pergunte na lista blogosfera, tem muita gente lá que usa WP.
Excelentes dicas, tenho aprendido imenso com este blogue, está adicionado nos meus favoritos, assim como o feed.
Parabéns
Muito obrigada! Se tiver alguma idéia de assuntos ou tutoriais que gostaria de ver aqui, me mande!
muito útil, muito obrigado !!!!!
Nosph, não achei o trecho que vc tinha pedido. Uso o blogger novo. E aí?
caraca.. mto útil e interessante esse post.. jah tah add no meu blog.. se quiser ver como ficou fica o convite… =D
abraço..
eu te amo!!!
hauhauhauhauhau
vc nao sabe como esse blog foi util!!
a um tempão que garimpo a internet atras de uns codigos quando achei num blog o link pro seu blog.
e eu ja tratei de tirar um monte de coisas daqui (eu sou ladrão ne?hauhauhauhau).
obrigado pela ajuda!!
Julio Verne: De nada!
Rafael: Se você tem certeza de que não existe um trecho exatamente igual, então você tem que descobrir qual é o trecho do seu template que corresponde ao trecho que eu citei.
Nem todos os templates são iguais, mas todos têm as mesmas funções. Dê uma fuçada por lá.
Thiago: Obrigada.
ícaro: Que bom que meu trabalho é útil pra você! Pode roubar as dicas, sempre e quando não reproduza meu texto em outros lugares.
cara…
da um erro quando eu coloco o código
o erro é…
“Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “type”.”
ah sim… eu falei do código…
o do passo número 2
Leonam: O WordPress trocou todas as aspas do código por acentos. Ainda não tive tempo de corrigir isso.
Faça o seguinte: procure tudo o que aparentemente são aspas e aspas simples (que na verdade estão como acentos) e substitua por verdadeiras aspas e aspas simples. Aí o código vai funcionar.
pra mim não funcionou deu erro
o primeiro codigo não aceita
Eduardo, leia o comentário que deixei antes do seu, ali está a solução.
aff! tentei até não aquentar mais!
não da certo! ja troquei as aspas e nada!
por favor corrija o poblema esta aparecendo esse erro!
grato!
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “type”.
Já corrigí todos os códigos. Daqui pra frente, se alguém encontrar problemas, pode estar certo de que não são devidos ao código.
putz esse num to conseguindo colocar não, logo no passo 5 jah da erro, colo certinho o que tem de colar e dah isso:
Não foi possível concluir sua solicitação.
O que será?
Obrigado!
Noturno, não faço idéia. Desculpe, mas não vou poder te ajudar nesta.
ñ sei pq mais agora consegui hauehaueha!!
Mto obrigado pelo tutorial.
Que bom, eu fiquei triste por não poder te ajudar!
De nada, feliz 2008!
Sou novato aqui, não sei se tem alguma regra, mas os códigos que você põe como exemplo são todos diferentes do modo que aparece aqui.
Aqui eles são todos ‘agarrados’, já no exemplo tu põe um em cada linha, ai fica difícil de entender.
P/ quem já é expert no assunto não deve encontrar problemas, mas quem faz pela 1º vez encontra dificuldades, olha que fiz tudo comomanda o gabarito.
Mesmo assim parabenizo teu blog, você se dedica bastante p/ ensinar p/ o pessoal.
Volto a dizer que é uma pena que nada funciona por aqui.
Se tu tivesse um tempinho e pudesse me ajudar ficaria grato.
Até
Júlio: Obrigada!
O normal é que os códigos estejam separados por linhas. Provavelmente você usa um template “mal feito”, no qual colocaram todos os códigos apinhados. Sinto muito, mas não posso resolver isso pra você.
E não é verdade que nada funciona por aqui; ALGUNS hacks tiveram seu código corrompido durante a migração ao WP, e eu já corrigi quase todos. E ainda assim, eu expliquei nesses hacks como o leitor pode resolver o problema por si mesmo, se não quiser esperar que eu corrija o código.
De qualquer forma, suponho que você já não deve estar interessado em nada disto, pois vi que migrou para WP. Boa sorte!
Que tal ensinar agora como fazer os posts relacionados aparecerem na home tbm?
Caloã: Esse hack não funciona na Home, pelo menos que eu saiba.
Eu tenho um medo desses hacks que começam com “Salve um backup do seu blog”…rsrs…mas tudo bem, tô corajosa hoje! Vamos lá!
Não tenha medo; salvar o template é uma medida de prevenção, caso ocorra algum problema.
Você deve fazer isso sempre que for modificar o template, quer o hack indique para fazê-lo ou não.
deu erro na part 3.
“Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.”
Cincer: Eu já fiz tudo o que podia para corrigir os códigos. Não tenho como saber se o problema é com códigos ou com seu template, ou bug do Blogger.
Dê uma lida nos comentários, talvez a solução para seu problema esteja aí – já postei soluções para vários problemas diferentes.
Fiz todos os procedimentos, nenhum deu certo amigo. A linha que aparece no meu é diferente da que vc pede pra localizar.
Se puder ajudar, agradeço!
abraço
div class=’post-footer-line post-footer-line-3′
Olá tudo bem?
pocha muito bom este Tuto. Me ajudou pra caramba
só queria saber como faço pra colocar as bolinhas en cada Link do Posts relacionados. Como o exemplo
Posts relacionados:
•Essa bolinha da direita.
•
•
entende?
no meu não aparece isso, se puder me dar uma mão, eu agradeço. O Resto eu consegui tudo certinho.
Obrigado
ops
corrigindo.
Bolinha da “Esquerda”…
desculpa… ^^
Rafael: Essa linha representa a 3º linha do footer (rodapé) do seu post. O que você tem que fazer é encontrar o footer do post no seu template.
Os hacks funcionam em templates padrão assim como estão explicados, e em templates personalizados com alguns ajustes.
Infelizmente, não tenho como descobrir como implementá-los em cada modelo diferente de template: é impossível por questões de tempo.
William: Bem, para isso você tem que usar CSS. Você teria que criar un span class para os posts relacionados, e definir o estilo da lista dentro dele.
Por questões de tempo, eu não possso resolver isso pra você. Mas se estiver interessado, procure no Maujor – eles têm de tudo sobre CSS lá. boa sorte!
Olá. Obrigado, mas eu não achei nada no Maujor, se puder me ajudar.
eu precisava disso aí, mas eu não entendo nada de CSS.
Se puder me ajudar, eu agradeço.
Entendo que você deve estar sem tempo. Mas quando tiver podia me ajudar? Eu espero
Obrigado, e parabéns pelo seu site.
Me ajudou muito
William: Desculpe, mas de momento não vai dar MESMO! Vai ser difícil conseguir uma brecha.
Se eu conseguir tempo, eu te aviso – mas te recomendo que enquanto isso vá aprendendo um pouco de CSS. Isso vai te ser útil não só neste caso, mas para qualquer coisa que você queira fazer no seu blog.
Até mais!
Eu só consegui resolver o problema do " e dos < e > quando coloquei o script em um arquivo js hospedado fora do blogger (merchan: google pages hehe)
Agora, estou estudando o código pra ver se descubro uma forma de o próprio post não aparecer na lista de posts relacionados, vc sabe alguma forma?
Ah, e por último, estou postando no meu blog como implementar o posts relacionados no blogger, com as devidas referências, ok?
Vlws aí pela dica, funcionou depois de fuçar um pouquinho mas funcionou perfeitamente !!
Valeu!!!
Testei no meu blog e ficou blz!
Vindemiatrix: Que bom que conseguiu resolver!
Não sei, não. Acho que não é possível – pelo menos, nunca encontrei solução para isso.
Só peço que não copie meu texto, ok? Referência, tudo bem; cópia, não.
De nada!
Agnaldo: De nada!
seria bom se essa porcaria funcionasse todo mês tento aplicar e nunca funciona, ja testei em varios templates diferentes é impossivel botar isso no blog !
Filipe: Engraçado que “essa porcaria” funciona em um monte de blogs, né? Lamento que não tenha funcionado pra você, mas impossível não é. Esta cheio de gente aí para prová-lo.
Sem dúvida, os posts relacionados são uma ótima estratégia de deixar o blog mais usável e dinâmico. Faz como os visitantes não vão embora logo do seu blog.
Valeu pelas dias, e pelas postagens.
Abraços
Analistati: De nada, é um prazer ser útil. Volte sempre!
[...] Widget de Posts Relacionados para Blogger – Blogspot Lista de Posts Relacionados para Blogger – Blogspot [...]
Prezada Nospheratt,
Quando chego ao passo 5, vejo essa mensagem! O que devo fazer?
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The reference to entity “callback” must end with the ‘;’ delimiter.
Desde já agradeço