12/12/2010

Lista de Posts com Assuntos Relacionados no Blog

Uma boa técnica para conseguir mais pageviews (fazer as pessoas olharem mais paginas do blog) é mostrar uma lista de links com os assuntos relacionados no final de cada postagem, já mostramos anteriormente como assuntos relacionados com miniaturas das imagens e também assuntos relacionados e classificação das postagens com estrelas no mesmo acessório.

Mas o código que vamos mostrar a seguir exibi somente os links sem imagens e pode ser uma boa opção para mostrar os assuntos relacionados sem precisa carregar imagens o que ajuda o blog ficar com a navegação mais rápida entre as paginas do seu blog.

posts relacionados
Entre na pagina editar html e cole esse trecho antes de linha </head>
<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;
while (i < relatedTitles.length && i < 20) {
document.write('<br/><a href="' + relatedUrls[r] + '">' + relatedTitles[r] +
'</a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
}
//]]>
</script>

Clique para salvar, depois marque a opção Expandir modelos de widgets e procure por:
<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>

Agora coloque o trecho abaixo antes da linha </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=5"'
type='text/javascript'/>
</b:if>

Salve novamente as alterações e procure por <p class='post-footer-line post-footer-line-3'/>, quando achar cole esse código logo após:
<b:if cond='data:blog.pageType == &quot;item&quot;'> Posts Relacionados</b:if>
<div class='assuntos'><script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

Salve as alterações. Agora nesta parte final vamos fazer a formatação os links ou fazer botões com eles, veja que definimos um estilo de formatação(CSS) div class="assuntos", então volte até o inicio do HTML do seu blog e antes da linha body{.... } coloque esse código:

.assuntos a{text-indent:15px;background-image: url(http://img829.imageshack.us/img829/2537/outc.gif);background-repeat: no-repeat;background-position: left 4px;padding-left:15px;padding-top:1px;padding-bottom:1px}
.assuntos a:hover{background-image: url(http://img522.imageshack.us/img522/9107/overl.gif);background-repeat: no-repeat;background-position: left 3px}

Veja aqui como mudar o estilo dos links:
Como fazer e colocar botões no blog
Como Formatar o Texto do Blog
Código das Cores
Imagem ao lado do texto ou link

A maior parte deste código já foi publicado anteriormente pelo Códigos Blog, nós apenas acrescentamos a parte da formatação para melhorar a aparência da lista de links.
Related Posts with Thumbnails

63 comentários:

  1. Legal!
    Há um tempo eu queria saber... como se cria uma imagem ou texto que, quando clicado, aparece algo em baixo? Tipo o arquivo do blog como menu suspenso, sabe?
    É usando o onmouseover?
    Obrigado!

    ResponderExcluir
  2. Ai mano vim agradecer a tudo o que sei pertence a voce, hoje meu blog está com 6000 visitas diárias e em primeiro lugar no google
    Obrigado por postar tutoriais
    me ajudou muito
    vlw
    :D

    ResponderExcluir
  3. não consegui fazer meu template n tem
    :S

    ResponderExcluir
  4. meu template ñ achou os codigos o que faço?

    ResponderExcluir
  5. se baixou seu template de algum site é provável que tenha tags diferentes.

    alguns modelos novos do blogger também tem tags diferentes, estamos fazendo alguns testes para achar outra maneira de mostrar essa lista, assim que concluirmos vamos publicar aqui no Dicas para Blogs

    ResponderExcluir
  6. olha essa foto do meu blog ( http://img87.imageshack.us/img87/3715/blogggggggggggggg.jpg ), essa postagem relacionada eh do LinkWithin e ta sem imagem,só que algumas ficam com imagem outras nao,eu queria uma tipo assim,mais na pagina inicial do blog,nao dentro de cada postagem,nessa vc pode ver q ta na pagina principal do blog...ainda nao conseguiu uma assim neh? abraços

    ResponderExcluir
  7. infelizmente isso é proprio do linkwithin, não temos como controlar quando ele mostra imagens ou somente links

    ResponderExcluir
  8. Gostei, muito legal mesmo.

    Gostaria de saber como fazer, assim como nesse blog, algum recadinho. Exemplo:

    "Leia antes de comentar
    Comentários com insultos ou escritos em miguxês serão excluídos.
    Não faça spam, comentários com endereço ou links de blogs serão deletados.
    Muitas pessoas tem acesso a esse blog portanto não deixe seu email ou senha nos comentários"

    Vocês tem algum post que fala sobre isso? Aguardo respostas.

    Beijos

    ResponderExcluir
  9. Paulinha, isso é simples de fazer, entre em configurações, comentários lá você encontra Mensagem do formulário de comentário, então é só digitar um texto, vou fazer uma explicação mais detalhada sobre isso, afinal ainda não tocamos neste assunto

    ResponderExcluir
  10. Olá Fabiano.
    Gostaria de saber se você sabe como resolver este "problema".
    Adicionei no meu blog, e as listas aparecem (q por sinal são ótimas). mas gostaria de saber se tem como retirar um link que aparece escrito "undefined" em todos os posts.

    ResponderExcluir
  11. está aparecendo undefined usando o código desta postagem? é muito estranho, veja se fez as alterações corretas, provalmente houve algum erro de caracter no copiar e colar o código

    ResponderExcluir
  12. meu template não tem esse codigo---> body{.... }
    como faço por favor!

    ResponderExcluir
  13. não aparece exatamente assim no lugar dos pontinhos tem códigos de formatação

    ResponderExcluir
  14. Olá! Como tenho dois blogs com o mesmo assunto mas com enfoques diferentes, gostaria de saber se existe alguma ferramenta/código para fazer com que fiquem interligados através da automatização de links relacionados, ou seja, que os links relacionados sejam buscados nos 2 blogs?

    Valeu!

    ResponderExcluir
  15. não tem como juntar os dois blogs nos assuntos relacionados, mas você pode fazer um lista de links aleatoria de um blog no outro, veja aqui:
    Lista aleatória das postagens recentes do blog

    ResponderExcluir
  16. Fabiano... Como deixar os links posicionados do lado esquerdo (left)?
    Beijinho

    ResponderExcluir
  17. na parte final do post tem a formatação dos links, então dentro do estilo .assuntos a{...

    coloque text-align: left;

    ResponderExcluir
  18. Com text-align:left;
    Não deu certo, porém consegui com float: left;, mas fica encima da barrinha de separação das postagens e os links estão todos em maiúsculo...
    Como resolver isso?

    ResponderExcluir
  19. se usou o float left, coloque também padding-left:5px; e ajuste o valor 5px

    sobre as letras todas maiusculas veja se tem esse estilo no seu código quando encontrar apague


    text-transform: uppercase;

    ResponderExcluir
  20. Veja bem, no código já tem padding-left:5px; é só para ajustar o valor 5px?
    E as letras continuam em maiúsculas mesmo tendo apagado text-transform: uppercase; Há outro código possível provocando isso?

    ResponderExcluir
  21. tem como fazer com que esse codigo fique na pagina inicial do blog em cada postagem? e nao só dentro da msm....pq tipow,só aparece os posts relacionados qnd clicamos na postagem né

    abraços

    ResponderExcluir
  22. esse código só funciona dentro das postagens. o que usamos em nossa barra lateral é uma adaptação de outro código: Lista aleatória das postagens recentes do blog

    ResponderExcluir
  23. ah! droga! o que qui eu faço?????
    nas duas primeiras deu certo, ai eu salvei,
    so que depois, eu caçei apertanto control F e não existe o <p class='post-footer-line post e nem no resto num existe +! meu blog já era! o que qui eu faço?
    U_U

    ResponderExcluir
  24. pesquise por post-footer-line deve ser mais facil de achar

    ResponderExcluir
  25. o que o (a) @@@@ está querendo dizer que caçou pelo control F?? o que isso faz e como se faz??
    porque eu to lendo o textinho la dos htmls inteeeiro a procura do post-footer-line e não acho

    ResponderExcluir
  26. Aahhh, eu to com a impressão que eu coloquei o código do 1° passo no segundo tambem e depois salvei !!!!e agora eu nao acho por nada o post-footer-line !! meu blog já era!!!!! O que eu faço????

    ResponderExcluir
  27. Juuh s2
    aperte o botão ctrl e a tecla F no seu teclado vai aparecer uma caixa para buscar texto dentro da pagina atual, assim pode achar os códigos mais facil, mas digite trechos pequenos, e iguais ao código que procura (espaços em branco fazem diferença na busca)

    ResponderExcluir
  28. precisa clicar para expandir o modelo para achar o trecho post-footer-line

    ResponderExcluir
  29. Fabiano, no código... Onde está o controle de quantidade?
    Ou seja, se quero colocar apenas 6 assuntos, onde mexo?

    ResponderExcluir
  30. a quantidade está neste trecho pt&callback=related_results_labels&max-results=5

    ResponderExcluir
  31. Fabiano... Eu coloco a quantidade e não obedece... aparece uma quantidade muito grande.
    Está feio. O que faço agora?

    ResponderExcluir
  32. vou fazer mais alguns testes no código... quando fiz o tutorial usei o código e funcionou normalmente, mas fui fazer agora e realmente não consegui mudar o numero de postagens

    ResponderExcluir
  33. a ultima parte nao consigo! nao tem o body.. lá! q q eu faço pra fik sem imagens?

    ResponderExcluir
  34. karolvmc

    esse trecho final pode ser antes de ]]></b:skin>

    veja mais aqui: Onde colocar os códigos no blog

    ResponderExcluir
  35. muito boa estas dicas,gosto muito desse blog,eu gostaria que vcs fizesse artigos sobre meta tags séria possivel?

    ResponderExcluir
  36. Não consegui e preciso muito disso
    a linha
    -p class='post-footer-line post-footer-line-3'/-
    não existe esta linha
    existe em ves de post seria coments
    'coments-footer'
    Se souber me dizer se posso criar a linha -p class- em em que lugar devo criá-la?

    ResponderExcluir
  37. use o ctrl f e pesquise por um trecho menor, por exemplo footer-line

    o crtl f procura texto exatamente igual, as vezes um espaço dá erro

    ResponderExcluir
  38. pesquisei somente a palavra footer
    e ela aparece duas veses e diz:
    coment-footer
    nas duas!
    creio que eu tenho que fazer essa linha
    se tiver algun tutorial de como faze-la!

    ResponderExcluir
  39. então uma delas deve ser parecida com o trecho que citamos na postagem

    ResponderExcluir
  40. Olá fabiano depois de quase desistir estou aqui denovo!
    Até o passo 2 tudo certo
    dps desse passo ja tenho posts relacionados mas ficam abaixo dos comentarios lá longe!
    No passo 3 como não existe a linha line-3
    resolvi colocar o codigo em varios lugares
    1º ele apareceu no mesmo lugar embaixo dos comentarios só que ele duplicou
    2º A Parte Duplicada consegui colocar no Lugar certo ficou entre os posts e os comentarios. O Problema que meu template não tem essa sidebar e fica tudo escuro aparece somente as imagens

    Se Puder me ajudar a desduplicar e fazer uma sidebar :D
    valews

    ResponderExcluir
  41. Baixe A Mais
    a idéia de colocar em varios lugares até achar a posição certa é boa ... já fiz isso varias vezes...

    mas tem que colocar uma por vez e apagar na hora de trocar senão ficará mesmo com conteudo duplicado

    ResponderExcluir
  42. Puxa, fiz tudo passo a passoe nao apareceu nenhuma lista no meu blog... Nao tenho que necessariamente fazer os botoes, né? Depois de editar o HTML comod escrito aqui, onde deveria aparecer a lista de assuntos do meu blog?
    Obrigada!

    ResponderExcluir
  43. Ah, acho que achei, quando clico nas postagens, lá embaixo aparece "posts relacionados". É isso? E como faço para relacionar os posts?

    ResponderExcluir
  44. Mony ;-)
    isso mesmo, os posts relacionados só aparecem na pagina das postagens do blog e não na pagina inicial

    ResponderExcluir
  45. Mas como faço para relacionar os posts? Porque só aparece escrito "posts relacionados", mas nao aparece nenhum link para nenhum post...

    ResponderExcluir
  46. Mony ;-)
    você usa os marcadores no seu blog?.... os assuntos relacionados são feitos com base nos marcadores

    ResponderExcluir
  47. Ah, obrigada, já me liguei! Deu certinho! Muito obrigada pelas dicas!

    ResponderExcluir
  48. não consigo achar a terceira parte ja procurei 8 vezes por que ???

    ResponderExcluir
  49. talvez seu template seja diferente... se for o caso não tem o que fazer.

    mas veja se marcou para expandir o modelo e use o ctrl F

    ResponderExcluir
  50. isso quer dizer que n tem jeito de colocar no meu blogger ? tambem coloqueno ctrl + F e n encontrou

    ResponderExcluir
  51. seu template deve ser modificado, por isso usa tags diferentes então não tem como modificar.

    só de entender de html para achar os trechos certos e claro fazer testes até descobrir

    ResponderExcluir
  52. Olá! Tenho uma dúvida: instalei o linkwithin no meu blog, porém ele mostra posts que eu já havia excluído. Existe alguma forma de corrigir isso?

    ResponderExcluir
  53. infelizmente não tem como resolver problemas de posts já excluidos no linkwithin

    ResponderExcluir
  54. Olá Fabiano, gostaria de tirar uma dúvida. Sabe em baixo do seu post onde colocou: Outros Tutoriais.
    Como eu faço isso igual ao seu utilizando imagens?

    ResponderExcluir
  55. Outra dúvida. rs. Como faço pra apagar o Tecnologia do Blogger do rodapé e deixar os créditos q eu quiser? Vlw ai e parabéns pelo Blog, tem me ajudado muito.

    ResponderExcluir
  56. JC

    usamos o linkwithin para mostrar "Outros Tutoriai..." ,veja aqui Mostrar assuntos relacionados no blog

    não posso mostrar como retirar os creditos do blogger

    ResponderExcluir
  57. Não dá certo de jeito nenhum.
    Primeiro tentei não alterar nada no código; aparece o "leia mais" formatado mas sem nenhum link embaixo.
    Depois tentei modificar a parte que indica o link do feed do blog e colocar o link do feedburner n lugar e nada.
    Por último, tentei trocar as ocorrências de " por aspas e & por & e aparecia uma mensagem de texto dizendo que a referência à entidade "max-results" foi referenciada, mas não declarada.

    ResponderExcluir
  58. ϟ Rαumschiffkαpitänin
    o sinal & faz parte do código não pode modificar isso.

    ResponderExcluir
  59. Olá, por favor me ajudem.
    Coloquei linkwithin no blog da minha escola, mas os posts colocados após a instalação do linkwithin não estão aparecendo. O que eu faço?

    ResponderExcluir