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.

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/acima dela:

<!-- 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 Dropbox- 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 comentários recentes 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.

3º - Clique em SALVAR MODELO.

4º - Marque a caixinha “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 o código em azul entre as linhas:
<b:if cond='data:label.isLast != "true"'>,</b:if>
e
</b:loop> :

<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>

7º - Clique em SALVAR MODELO.

Obs: 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 qualquer coisa que você queira.
Esse número não indica o total de posts, mas o máximo de posts que são mostrados por cada categoria. Por ex: Utilizo o nº 5

8º - Procure essa linha:

<p class='post-footer-line post-footer-line-3'/>

9º - Adicione este código logo abaixo da linha do 8º passo:

<b:if cond='data:blog.url != data:blog.homepageUrl'>Posts Relacionados</b:if>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

10º - Salve o template. Agora quando clicar no link do post você pode ver a lista de postagens relacionadas antes dos comentários!

Obs: Está vendo as palavras em azul Posts Relacionados?
Pois é, você pode mudar como quiser, como mudei aqui para Leia Também...

Aproveite a dica e melhore seu blog!

Fonte: Códigos Blog

Se você quiser editar a cor e o tamanho da linha LEIA TAMBÉM.... ou POSTS RELACIONADOS.
Use o código CSS abaixo colando-o logo acima da linha de código:
.feed-links {

.posts-relacionados {font-size:125%; font-weight:bold; color:red; padding-top:10px;   padding-left:20px; }

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.

Última Atualização: 17/06/09-17:32h