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
________________________________
Compare Preços de: Artigos Personalizados, Coisas Personalizadas, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei
________________________________
Corrigindo: no passo 7!!!
Desculpe a distração!
Pelo que vi, você já conseguiu arrumar. Parabéns!
Olá, só funcionou comigo depois que troquei alguns sinais que no texto estão como ´ (Acento agudo) e ` (crase) por ‘ (meia aspas, acho que é esse o nome). Obrigado pela dica.
Não consegui fazer… Dá erro na segunda parte1 É o segundo Widget do seu site q tento adicionar ao meu blog e não consigo! O de colocar posts entre o título e a postagem não estava conseguindo pelo seu código… mas com algumas alterações conseguir fazê-lo funcionar!
Poderia me auxiliar a colocar este widget de posts relacionados?! teria como eu te passars meu arquivo xml para vc dar uma olhada?!
Olá amigo, não estou conseguindo colocar no meu site.
Veja bem, no passo 4 vc pede para pocurarmos o seguinte trecho:
,
Bom… aqui eu tenho este trecho mas com as seguintes alterações:
na 5ª Linha:
,
repare q ao invés de ” tem "! Isso provavelmente deve estar influenciando em algo! pois quando faço o passo 5 e clico em visualizar… da erro no site:
“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.”
Então… o que fazer!? consegue me ajudar!?
Voyage: De nada!
Roberto: Eu já falei, os códigos foram corrompidos pelo WordPress. Tem que trocar as aspas e aspas duplas pelos caracteres corretos.
Eu faço manualmente, nem tanto por opção mais sim porque quando eu comecei não conhecia esse plug-in
Fazer na mão da um pouco mais de Trabalho mais acho que é válido.
Ninguem sabe melhor do que você qual conteúdo oferecer para o seu visitante
Abraços !
Ricardo: Claro que é válido. Concordo totalmente em que você sabe melhor que ninguém o que oferecer – se você tem tempo e disposição para fazê-lo manualmente, acho uma excelente idéia!
O código sugerido acima não funcionou para mim.
Só consegui colocar a lista de posts relacionados com as adaptações sugeridas no Códigos Blog. Ai foi barbada!!!
O endereço é este:
Posts Relacionados
Carlos: Na verdade, não existe modificação nenhuma lá, é um resumo dos hacks que eu publiquei. Acontece que lá os códigos não tem o problema das aspas corrompidas que o WordPress causa aqui.
Eu gostei muito da sua dica, mas com seu código não funcionou, só com o código do site original Purple Moggy’s Blog, por um motivo muito simples: você usa um editor de textos que transforma todos os apóstrofos (‘ e “) em aspas (’‘ e “”). Pode parecer bobeira, mas isso inutiliza totalmente o código. Fique atento!
Tá aparecendo a seguinte mensagem de 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: The reference to entity “max-results” must end with the ‘;’ delimiter.
Olá
Inicialmente, parabéns pelo blog. Gostei das dicas.
Gosto muito do Blogger, mas o WordPress está me atraindo com a profusão de widgets e outras funcionalidades. Cuido de um blog em wordpress para minha igreja e é muito fácil de trabalhar.
Contudo, ainda não desisti do blogger e o seu blog está me dando novas esperanças…..
Uma delas é este artigo sobre Postagens Ralacionadas.
Tentei seguir os passos, mas deu erro. Não achei o trecho no meu template (cujo nome é Snapshot, padrão do blogger):
Este seria o passo 4 em sua lista.
Já tentei achar trecho semelhante para “adaptar”, mas não consigo. Você pode me ajudar?
O arquivo xml do meu template está aqui:
http://www.missoeseadoracao.org/template-blogger-missoeseadoracao.xml
Para confirmar.
É este o trecho que não encontro:
4 – Procure o seguinte trecho de código (certifique-se de que é esse trecho exato, existem outros parecidos):
<blockquote cite=”
,
“>
OOOPS! deu erro! Desculpe
O trecho é este:
,
[...] Uma maneira muito utilizada para aumentar o número de pageviews de um blog é colocar uma relação de artigos relacionados ao assunto no final do artigo. Assim se o leitor quiser ler mais sobre o assunto ele poderá continuar no seu blog. No wordpress existem muitos plugins que fazem esse serviço, eu utilizo o Yarpp e tem dado muitos resultados posivitos. Veja no Blosque como implementar posts relacionados no Blogger. [...]
bom acho que eu segui certinho o tuto
mais infelismente ñ deu certo aq ñ !!!!!!!!!!
Alguém saberia me dizer por que coloco o código:
center script src=’http://www.obanner.net/view2.php?barra=1&sistema=468&m=26545′ type=’text/javascript’
/script /center
E aparece o seguinte 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: The reference to entity “sistema” must end with the ‘;’ delimiter.
Alguém saberia me dizer por que coloco o código:
E aparece o seguinte 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: The reference to entity “sistema” must end with the ‘;’ delimiter.
[...] fazer o mesmo no Blogger? Então veja aqui no Blosque [...]
5 - Cole este código ANTES do :troque por esse:
Gosteu da idéia do banner,assim que vc criar me avisa ok?
Gente!Prá que sofrer?????????É só entrar no site http://www.linkwithin.com que tem um widget que faz tudo isso por vc(e com as fotos dos posts minimizadas)!!!
Abraços!
Testei o linkwithin. Ele coloca em baixo de cada postagem três posts com fotos. Se não há fotos, ele não insere. ALém disso, ele coloca em cada postagem, mesmo na página inicial, com várias postagens. Outra coisa, não vi muita relação entre a postagem original e as “relacionadas”, não segue as tags….
Parabéns, você realmente faz um excelente trabalho,recém comecei um blog e estou achando realmente de extrema utilidade.
[...] ideia muito boa é manter um Widget de Posts Relacionados ao fim dos textos. Assim, os leitores terão algo relacionado ao que acabaram de ler, e podem [...]
[...] dica, agora, é utilizar um Widget de Artigos Relacionados ao fim de cada post, para aumentar a qualidade de navegação de seus visitantes, que têm, com [...]
Consegui depois de trocar & por ; em : script&callback e labels&max.
Obrigada por todas as dicas que disponibiliza aqui!
Òtima dica , excelente trabalho
Cara, muito massa essa dica. Pena que o blogger é muito limitado, mas funcionou certinho! Valeu, parabéns pelos Tutorial!
Ai depois vi o comentário do Alex sobre o linkwithin.com e me senti uma besta…