Fazer com que o leitor visite o seu blog é uma coisa, agora fazer com que ele continue por mais tempo, lendo mais postagens (a tal taxa de rejeição), é outra completamente diferente e por sinal, muito mais difícil. Uma boa forma de se conseguir isso no Blogger/Blogspot é entregando ao leitor mais daquilo que ele veio buscar, ou seja, mostrando à ele postagens relacionadas ao que ele está lendo. E não se preocupe, pois a lista só aparece na página individual da postagem.
Para inserir uma lista de Postagens Relacionadas no final da postagem, faça o seguinte:
Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template. Então marque a opção Expandir modelos de widgets.
Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.
Encontre o seguinte código (utilizando o Ctrl+F do seu navegador):
</head>
Então cole o seguinte código ANTES:
<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>
Agora encontre este 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>
Então cole este código ANTES do </b:loop> (observe o contexto do </b:loop> para que seja igual ao apresentado acima, pois existem vários </b:loop> no código):
<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>
Altere o número “5” destacado em laranja do código acima pelo número de postagens relacionadas que você deseja que apareçam para cada categoria/marcador. Por exemplo, se a sua postagem possuir os marcadores “Notícias” e “Futebol”, aparecerão 10 postagens relacionadas no total, 5 para cada marcador.
Agora só mais uma vez, encontre este código:
<div class='post-footer-line post-footer-line-3'/>
Então cole o seguinte código DEPOIS:
<b:if cond='data:blog.pageType == "item"'><h3>Postagens Relacionadas</h3></b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
Altere a parte em laranja se quiser dar outro nome à lista de Postagens relacionadas. Talvez “Artigos Relacionados”? Você quem sabe.
Como esse hack funciona somente nas páginas individuais, não será possível visualizar diretamente o resultado. Então visualize apenas para checar se houve algum erro com o template e clique em Salvar Modelo. Em seguida abra uma postagem no seu blog para verificar o resultado.
Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.
Anterior
Assine o Feed
Adicione ao Google
Receba por Email
Twitter
Nossa! Muito obrigado.
Funfou direitinho no meu blog.
Você tem algum código para "diminuir o tamanho dos posts" ou seja, colocar o "LEIA MAIS..."
Valeu.
AÊ brother valeu mesmo... já havia tentado com outros códigos parecidos, mas não dava certo.
Blz! Tudo funcional,obrigado.
no meu funcionou blz, mas não aparece as postagens relacionadas
Esta-me a acontecer o mesmo que o Eduardo, no Html tudo corre bem mas depois apenas me aparece o titulo "Postagens Relacionadas"
parabéns! estou seguindo as dicas!
Tenho usado suas dicas e posso dizer que têm me ajudado muito em meu blog!
Valew! Espero que continue postando !
Obtive o mesmo erro que o Eduardo e o Flip acima.
A lista não traz nenhum resultado.
=/
Sou o Eduardo, usei outro código e funcionou, obrigado mesmo assim "D
a mesma coisa aconteceu comigo! assim como com o Eduardo,usei o código e só aparece o postagens relacionadas e nada de lista abaixo dela!!:( mesmo assim a dica e boa!
funcionou vlw
iae Sérgio, tentei colocar ele no meu Blog, fiquei em duvida (extranho pq sempre consigo me virar em todos os tutorias) Procurei pelo codigo:
div class='post-footer-line ...
e... achei este:
div class='post-feeds'...
Cole aquele codigo depois, como você explico. Visualizei pra ver si tinha feito algo errado, mais não apareceu erro nenhum, eu fiquei na duvida, pq si salvar e não acontecer nada, vou perder tempo em procurar e remover todo que inseri, então arrisquei a salvar, visualizei e tava ali, o script de Postagens Relacionadas.
Vlw pelo script, sucesso pra você.
Ola! Comigo funcionou direitinho! VAleu!!!
Valew mesmo, ficou ótimo!!!
Além do mais, gosto de coisas bem explicadas. A forma como vc postou esse artigo não deixou nenhuma sombra de dúvidas!!!!
parabéns
Kara, Muito Obrigado mesmo =D, To deixando meu Blog do jeito que gosto xD
Tb estou deixando o Blog do jeito que queria...obrigada por todas as dicas!!!
;)
MUITO OBRIGADO NÃO TINHA CONEGUIDOS NOS PRIMEIROS DIAS QUE TENTEI MAIS AGORA CONSEGUI OBRIGADO
Como sempre sem erros, agradeço a dica, venho procurando este tópico já faz um tempinho, até improvisei e coloquei os links manualmente acrescentando códigos de html para links...
prático e rápido.
Valeu.
Tudo certinho, mais uma vez, Obrigado.
Useias dicas e gostei muito!!
Valéu
Consegui instalar o hack porém esta aparecendo nos posts relacionados o título da postagem do marcador, ou seja , numa postagem de titulo (Desenvolvimento sustentável de marcador tendências) no post-footer-line-3 esta aparecendo novamente, repetindo. Como resolvo isto? Desde já agredeço, caso possa me ajudar.
no meu eu não consigo achar o código que pede!
Eu não consigo achar o ultimo codigo!!!!!
adorei a postagem... me ajudou muito.. vlw
Olá Não Deu Certo a Ultima Eta não acho post-footer-line post-footer-line-3
muito bom esse toturialmas tem um problema em lgumas postgens o maximo não é repeitado
e não é para menos é pra masi ou seja
pos o max em 10 e nas que so teem menos de 10 cooisas relacionadas tudo bem so aparece as que teem depois nas outras que teem muitas coisas relacionadas aparece mis de 10 por exemplo aqui aparecem 14
http://hackerssemlimites.blogspot.com/2010/01/template-filme-download.html
porque será???
Já tinha visto este post em outro blog mais não tinha conseguido acho que tinha alguma coisa errada, mas tentei do jeito que vi aqui e deu tudo certinho.
Essa dica é ótima!
Eu só gostaria de saber se é possível modificar as propriedades da fonte, como nome, estilo, cor e tamanho.
Muito obrigado.
muito obrigado funcinou muito bem
muito obrigado funcinou muito bem 2
No meu blog ocorreu um erro grave tipo na ediçãi rápida tem um lápid no roadpé , então esse hank quebrou a divisão do lápis com o blog fico partido como arrumo ?
Ola amigos.. me add ai no orkut por favor quero lotar.
http://www.orkut.com.br/Main#Profile?uid=15537255673137281919
Não consegui fazer pq sempre q vou salvar aparece a msg?
"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 element type "b:loop" must be terminated by the matching end-tag "".
fiz e deu tudo certo salvei e nada de posagens relacionadas,sabe me explicar o pq?
As postagens são relacionadas pelos marcadores, então, a maioria dos problemas deve estar relacionada a isso...
Se pa, suas postagens não tem marcadores, ou, só tem uma postagem por marcador, manja?
Ótimo tutorial!
Parabens!
Nada feito, não encontrei o código do item 4.
1000% Aprovado Tentei de varios não due por meu template ser personalizado mais o seu 1000% oK Valeu msm XD
obrigado =)
Depois de ja ter usado varios modelos que funcionaram, ja nao estava conseguindo o mesmo efeito em um template nao editado, foi somente com esta dica que consegui todos os outros falharam, isto se deve a desparidade de codigo nos templates modificados, mas graças a sites e blogs que sempre se atualizam como este ainda temos exito .. valeu ...
Olá, você sabe como faço para deixar as fotos centralizadas e sem distorcer nos boxs relacionados? E outra coisa: como faço para o título caber inteiro sem quebra?
Obrigada, Isabel
Muito obrigado, funcionou direitinho, eu estava procurando um tutorial assim faz tempo, mais eu tenho uma duvida, eu queira saber se tem como mudar a cor do "Postagens Relacionadas" que está marrom para uma cor Azul?
E o Blog e muito bom mesmo!
@DDI Downloads tem sim! procure no código css algo começado por # por exemplo #0033CC que é um dos azuis. depois vai aqui http://www.abpsoft.com/criacaoweb/tabcores.html e vê uma cor que goste e é só mudar o código a seguir do #. Cuidado que no código css pode ter mais que um # certifique-se que se refere ao que você quer
Naum aparece as postagens embaixo
test ae:
http://bloggergoogletest.blogspot.com/
meu blog de test
Muito bom!
:/ naao conseguii ta faltando um pedaço do codigo no comesinho :(
Está faltando códigos no início do item 5.
amigo muito bom mesmo vi essa tecninca em varios site mas ja tentei varias vezes e não deu serto , eu fiz direitinho , mas seis podem me da uma ajuda ? sera o templaite , se for oque tenho que fazer sem ter q mudar o templaite pra da serto da uma ajuda por favor meu blog é esse aqui http://filmesmegavideos2.blogspot.com oi clica no meu nome vai para o blog abraços espero sua ajuda
amigo o que da dando erro no meu é esse aqui não tem
class='post-footer-line post-footer-line-3'/>
tem esse aqui mas é diferente , tentei trocr pelo de cima mas da erro
class='post-footer-line post-footer-line-1'>
me ajude por favor cara entre em contato ok abraços
muito dez , esas explicações , um geito bem mais facil de compreender vlw mesmo , mas queria uma ajuda especial , sobre postagens poupulares , meu templaite não da pra por como fço falta um codigo q em vez de 3 tem um 1 no final e quando mudo da eero me ajudem ?!!