Lista de Posts Relacionados no Fim do Post

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Recebi uns e-mails perguntando como fiz para colocar a lista de posts relacionados no fim dos posts. Este recurso é legal, porque ajuda o leitor a encontrar mais posts relacionados ao que ele se interessou baseado no marcador que escolhemos para os posts!
Como este blog é para ajudar aos blogueiros a melhorar seus blogs e aprimorar com recursos legais.
Encontrei o tutorial no blog do Paulo - Códigos Blog muito bem explicado. Pedi a ele para publicar a dica aqui e ele concordou!
Clique em continue lendo e aprenda a colocar no Fim do Post uma Lista de Posts Relacionados.

Não Se Esqueça: » Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto: ♥ Sempre tente antes num blogue de testes. ♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar ♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

1º - Passo

»Faça login no blogger , clique em → "Modelo" → "Editar HTML".

»Leia:Como Acessar o Editor de HTML e Ativar o Search

»Encontre a tag </head> e cole este código acima desta tag.

<!-- Javascript Posts Relacionados -->
<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><!-- Fim Javascript Posts Relacionados -->

Outra Opção

» O código em LARANJA é o Javascript dos Posts Relacionados.
» COPIE as linhas em LARANJA acima COLE em um bloco de notas;
» Salve no bloco de notas em seu computador com a extensão .js no nome do arquivo - Ex: Clique em Salvar Como e escreva o nome: PostsRelacionados.js
»Hospede este arquivo em um site de sua preferência - Sugestão Googlecode →Como Hospedar Javascript no seu Googlecode - colocando o LINK fornecido por sua hospedagem onde está indicado abaixo e cole esta linha abaixo da tag </head>:

<script src='Endereço do Arquivo Java' type='text/javascript'/>

»Desta forma não haverá o risco de seus posts relacionados não funcionarem, a não ser que muitas pessoas usem o mesmo endereço do java e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

2º Passo – Ativando o Código dos Posts Relacionados

»Clique em cima do código e digite Ctrl+F:
» 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>

»Copie este código em azul abaixo:

<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=10"' type='text/javascript'/>
</b:if>

» Cole entre as linhas ▼:

<b:if cond='data:label.isLast != "true"'>,</b:if>
e
</b:loop>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Observação Importante:

Para modificar a quantidade de artigos que serão exibidos.
Veja o número que está em vermelho no código acima.

» Mude o número 10 para a quantidade máxima de posts que você desejar que seja exibida.

►Esse número não indica o total de posts, mas o máximo de posts que são mostrados por cada categoria.

3º Passo – Colocando os Posts Relacionados no Final dos Posts

»Procure por [post-footer-line-3]
<div class='post-footer-line post-footer-line-3'>
ou
<div id='post-footer'>
É importante que o código fique dentro da área dos posts.
Se não encontrar esta linha exata procure por:
[post-footer-line] que pode ser line-1, line-2 ou line-3 em geral.

» Adicione este código▼ logo abaixo desta linha:

<div class='relacionados'><b:if cond='data:blog.url != data:blog.homepageUrl'><h2>Posts Relacionados</h2></b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script></div>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

→Agora quando clicar no link do post você pode ver a lista de postagens relacionadas antes dos comentários!

4º Passo – Configurando o CSS dos Links e Título dos Posts Relacionados

»Está vendo as palavras em azul Posts Relacionados?
Pois é, você pode mudar como quiser. Por exemplo: Leia mais, Continue lendo, etc…

Para editar os links dos posts relacionados e o título » Use o código CSS abaixo colando-o logo acima da linha → ]]></b:skin>

/*---Posts Relacionados---*/
.relacionados ul{padding-left:0px;}
.relacionados ul li{/*Edita os links*/
background: url(URL-imagem de setinha) no-repeat left; /*img-flecha*/
margin:5px 0; border-bottom:1px dotted $bordercolor; list-style:none;
padding:0 0 2px 20px;  color:$linkcolor; font-size: 12px;
text-indent:0px;
line-height:1em;}
.relacionados h2{/*Edita o Título*/
font-size: 18px; font-weight:bold;
}

Onde:
☺font-size→ indica o tamanho da fonte;
☺font-weight→ indica se a fonte está em negrito;
☺color→cor da fonte;
☺padding-top→indica a distância superior;
☺padding-left→indica a distância da esquerda.

Este post foi originalmente escrito em 26/04/2008 e atualizado em 17/03/2013

Fonte: Códigos Blog