![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Manter o leitor interessando em seu blog é uma tarefa constante. Primeiro é importante ter conteúdo de qualidade e escrever sempre e escrever bem! Mas fazer com que o visitante olhe mais do que especificamente aquilo que estava procurando e encontrou(?) em seu blog, é outra dificuldade. Já mostramos como vc pode fazer isso pelos Marcadores e agora descobri como colocar uma lista de posts relacionados ao final de cada artigo.
Isso é muito útil. Se a pessoa leu seu artigo e, ao final dele, encontra uma lista simples de títulos com outros textos relacionados dentro de seu blog, isso aumenta e muito as chances dela ficar em seu blog por mais alguns segundos. Alguns templates novos já vêem com esse recurso incluído, mas se o seu é customizado ou não tem isso implantado, podemos dar uma forcinha!
É um pouco complicado, pois tem alguns códigos para adicionar e algumas linhas para mudar no editor de HTML do seu blog, mas vale a pena tentar. E, como lembramos sempre, faça um backup antes de mexer no seu código fonte.
Vamos aos passos:
1. Vá em “Editar HTML” dentro da aba “Layout” e marque “Expandir modelos de widgets” para poder ver o código completo.
2. Encontre a linha “</head>” e cole antes dela o código que segue:
<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>
É grande, eu sei… certifique-se de que copiou exatamente isso.
3. Agora será preciso encontrar mais outras linhas de 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>
4. Então, cole antes de </b:loop> o código que segue:
<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>
5. Mais uma linha para procurar (é a última, prometo. Depois disso acabou). Encontre essa agora:
<p class='post-footer-line post-footer-line-3'/>
6. Abaixo disso vc colará o último código:
<b:if cond='data:blog.url != data:blog.homepageUrl'>Posts Relacionados</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
7. Salve o modelo e verifique o resultado em seu blog.
Obs.: Isso só funciona se seus artigos estão usando marcadores, pois as linhas de código buscam por relações aí. Tb não podem ter caracteres especiais nos marcadores.
E, se vc quiser mudar a quantidade máxima de postagens relacionadas na lista que aparece, basta mudar o número dessa parte do código “max-results=5”.
Outros modelos de gadget interessantes:
Os créditos são do Usuário Compulsivo.
Não apresentei os créditos desse artigo, por ter encontrado essa mesma instrução em vários (mais de 6 sites diferentes), inclusive em inglês.
Portanto, acredito q essa funcionalidade tenha sido criada por alguém q não é mencionado em nenhum dos sites q li.
O próprio Compulsivo diz ter encontrado isso em outro site tb.
Esse tópico tá impossível de ler usando o Firefox…
Obrigado pela dica, tava querendo isso já a algum tempo.
Felipe,
Estranho você não conseguir abrir aí com o seu PC apenas esse artigo com o FireFox…
O [ Ferramentas Blog ] abre corretamente no Firefox, pois eu mesmo só uso ele para navegar na internet…
.
Olá Marcos, cara o hack tá ok mas no meu caso mesmo alterando o max-results ele insiste em aparecer 20 postagens, deve ser algum problema no java não?
Olá, estou com problemas. Não estou conseguindo encontrar a segunda linha de código no meu layout. Existe alguma forma de contornar isso?
Emanuelle,
Use o Internet Explorer e precione as teclas Ctrl+F e faça uma busca pelo conteúdo da página.
Olá, estou gostando muito do seu blog. O conheci há alguns dias através de um amigo parceiro do meu blog (fulaninha-downloads.blogspot.com). Os seus artigos são muito bons. Muito bem explicados! Inclusive este de posts relacionados. Segui seus passos e consegui! Já tinha visitado outros blogs que ensinavam esse hack, mas só agora, com o seu, que eu consegui. Parabéns seu blog está muito bom. Na minha opinião, um dos melhores. Beijos! Te desejo mais sucesso ainda!!!
..Olá MARCOs,,
..seu blog é muito útil.. neste post ..não encontrto de jeito nenhum ..
que é o último.. putz!
..será que está correto. até pelo ctrl F tentei sem sucesso..
.. se puder me ajudar.. vlew
Franco,
Certifique-se de ter marcado a caixa "Expandir modelos de widgets".
Só assim essas linhas ficam visíveis.
eu nao nconsigo de jeito nenhum achar a ultima linha. expandir os widgest.; usei o Ctrl F no mozilla e no explore, mas eu nao encontrei de jeito nenhum a ultima linha
Donizete,
Verifiquei o seu código-fonte e realmente não consta esta linha. Acho que vc precisaria entrar em contato com quem criou o template, pois ele seguiu outros padrões que não o normal.
Grande Marcos como sempre seus posts são muito bem detalhados e de fácil compreensão.
Me foi de grande utilidade!!!
Abraços
João Lemes
bom dia!!!eu obtive a mesma dificuldade q a do senhor franco e a do senhor donizete mas eu consegui procurando ñ pelo codigo todo q era a minha dificuldade mas sim por o codigo "post-footer-line" foi onde eu achei a linha representada div class='post-footer-line post-footer-line-3 eu ñ entendo patavinas de codigos html mas eu acho q seje o mesmo e deu serto.
Um abraço a todos e espero ter ajudado.
Oi! Lendo teu post resolvi instalar este link de postagens relacionadas. Entretanto, não encontro no meu blog a etapa 5:
.
(p class='post-footer-line post-footer-line-3'/)
.
No HTML do meu blog há uma outra linha parecidíssima, mas depois de ter feito todo o processo não aparece as postagens relacionadas. Segue a linha que aparece no blog:
.
(div class='post-footer-line post-footer-line-3')
.
Poderia me ajudar?
.
O blog é http://saudementalecidadania.blogspot.com
.
Abs
@Marcelle,
Esse recurso só funciona se você estiver usando Marcadores de postagens para classificar os artigos. Sem isso não funciona.
E a linha q vc achou é equivalente e está certo o que vc fez.
Boa Tarde !!
Vocês estão de parabéns de uma forma smples e rápida adicionei o formulário à dois blogs e adicionei os links de postagens relacionadas, show de bola PARABÉNS !!!!!!
Consegui agora… depois que vi um exemplo em outro Blog… no caso do seu não estava o código especificado …
No caso da opção 5 ..
No meu blog eu encontrei assim..
Já no exemplo vc passa dentro de um paragrafo … por isso que num tava encontrando…
e uma das dicas dadas … seria procurar apenas por post-footer-line-3 …
Flws aew ateh +++
Marcos,
uma vez fiz no meu blog, deu certo, apareceram as imagens, agora troquei de template, e fiz o mesmo procedimento, porem as imagens não vieram, e os posts relacionados vieram em lista.
Esse hack é lindo, prático e rápido de instalar, contudo (como tudo tem um porém), estou insatisfeito porque ele exibe na lista o post no qual estou lendo… Exemplo: Estou lendo o post: “Os melhores jogos da Copa” e no final do post tem a lista assim:
– Ingressos da copa já estão à venda
– Vuvuzela é o terror da Copa da África
– Os melhores jogos da Copa
– …
– ….
Se souber como resolver isso manda um alô de alguma forma, pode ser pelo twitter: @solitariablog. Em alguns dias volto aqui pra ver se tem resposta…
Na etapa 4 o código HTML esta errado Marcos ou é meu template,(div class=’post-footer-line post-footer-line-3′) só da certo com essa linha de comando a outra não existe,presumo que esteja errado o inicio do seu HTML.
Desde já agradeço pelo tutorial
Paulo,
As linhas podem variar ou você não procurou direito. Mas o código está correto.
Caso não achem o 5° passo do tutorial, modifique de <P para <DIV