Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Códigos e Scripts Postagens Vanessa S.

Lista de Artigos Relacionados no Rodapé do Post

Você já aprendeu a instalar uma lista de Artigos Relacionados com Imagens, onde os artigos relacionados ficam adicionados ao final de cada postagem e usa imagens e textos aos assuntos contidos nos mesmos marcadores.
Agora você verá outra maneira de instalar uma lista de artigos relacionados ao final das postagens, que é a que eu uso aqui no Mundo Blogger.

2

Para colocar no rodapé das postagens uma lista com os Artigos Relacionados, como uso aqui no blog, é muito fácil. É um recurso muito útil, pois direciona o leitor para outros textos contidos nos mesmos marcadores.
Para ter esse recurso, é necessário instalar um arquivo javascript no seu template.

Vá até o menu “modelo >> Editar HTML” , não precisa marcar “Expandir modelos de widgets” e localize a tag ]]></b:skin>
E cole ABAIXO dela:


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

Salve!

Agora volte ao modo edição HTML, marque “Expandir modelos de widgets” e procure por este trecho:


<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 != &quot;true&quot;'/>
</b:loop>
</b:if>

E cole o código a seguir logo ACIMA de </b:loop> :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>

Agora procure pela linha:


div class='post-footer-line post-footer-line-3

e cole logo abaixo dela, o código a seguir:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='relacionados'>
<h4>Artigos Relacionados:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Salve as modificações!

Se você preferir, você pode escolher outra opção de local mais adequado para instalar o código, mas instale sempre na linha do rodapé do post.
Sugiro que você dê uma lida no artigo:
Escolhendo o local para instalar elementos na área dos artigos

Os artigos relacionados aparecerão apenas nas páginas internas, e no rodapé dos posts, não aparecem na home.
Caso você queira que eles apareçam também na página inicial, basta apagar a 1ª e a última linha do código (destacados em vermelho).

Caso você queira modificar a quantidade de artigos relacionados que serão exibidos, por cada categoria, procure por:


<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>

E altere o nº 10 para o número que você achar melhor.

Se quiser alterar o título de “Artigos Relacionados”, altere o texto (destacado em azul)na linha :
<h4>Artigos Relacionados:</h4>

Aplicar estilos

Se quiser você pode aplicar estilos ao Título para definir o tamanho e a cor da fonte, e pode aplicar também estilos aos links. Para isso você deverá acrescentar um código no CSS.
Procure pela tag: ]]></b:skin>
E cole ACIMA dela:


/* container geral */
#relacionados{
margin: 5px; /*ajuste as margens se precisar*/
padding: 5px; /*ajuste as margens se precisar*/
}
/*título*/
#relacionados h4{
margin: auto;
padding: 0 0 0;
font-size:px; /*coloque aqui o tamanho da fonte*/
color: #; /*coloque aqui o valor da cor para o título*/
}

/*links dos itens da lista*/
#relacionados li{
font-size:px; /*coloque aqui o tamanho da fonte*/
}

Caso queira acrescentar um ícone ao lado dos links, em “#relacionados li” acrescente o seguinte trecho:


background: url(URL-DA-IMAGEM) no-repeat left;
padding-left: 15px;
list-style-type:none;

Aplique os estilos que quiser e Salve!

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

28 Comentários

  1. Ananda Maciel disse:

    Obrigada pelo tutorial, funcionou no meu blog 🙂
    deve haver alguma coisa errada com meu template, geralmente essas edições não funcionam ( e eu faço tudo direito, mais de uma vez.

    Por exemplo, não consegui colocar aquela paradinha de numerar os comentários, e eu acho super interessante.

    No mais, obrigada Nessa.

  2. Silvana disse:

    Ate q enfim achei seu site…
    Vi umas dicas boas ano passado qdo quis fazer um blog aí desisti mas a vontade voltou e encontrei teu site de novo…

    Ufa e ainda bem

    Obrigada pelas dicas …
    E Parabens pelo trabalho.

    😉

  3. Lina disse:

    Eu ainda não acredito que o que eu tentei fazer deu certo!!!!!

    O meu template já tinha artigos relacionados (o template que retirei daqui rsrs) só que era esse, sendo q eu queria o que possuía imagens. Então o que eu fiz: simplesmente o contrario. Ao invés de acrescentar, eu exclui e não é que deu certo!!!!

    Agora eu acrescentei o artigos relacionados que eu queria!!!

    To feliz!!
    O seu blog é ótimo, continue com o seu trabalho!!

  4. Zaraki Scofild disse:

    no meu blog nao funcionou e uma pena estava precisando desse sistema

  5. Caio Cesar disse:

    Vlw deu certo… esse é um dos melhores sites do genero

  6. William disse:

    Ola,
    Eu nao consegui achar esse codigo :

    Voces pode me ajudar ??
    até mais

  7. .:: Clau ::. disse:

    Sybylla
    Fico feliz que tenha gostado e mais feliz ainda pelo comentário e pelo retorno. Obrigada!

  8. Sybylla disse:

    Clau, finalmente um tutorial sobre esse assunto que foi fácil de entender e aplicar.

    Obrigada.

  9. .:: Clau ::. disse:

    Pessoal, não há como eu saber o que ocorre com o template de cada. repito o que já falei acima: tais recursos variam de template para template.
    Mas deixo uma sugestão: se vcs estiverem utilizando este recurso em um blog de testes e se ele estiver fechado, os artigos relacionados não aparecem mesmo. E outra coisa: para os artigos relacionados aparecerem as postagens tem que ter marcadores, não esqueçam!

  10. .fleshy. disse:

    Olha eu fiz tudo isso, só que não aparece os artigos relacionados. Só aparece "Artigos Relacionados" mas não aparece os links nem nada só o nome. E agora o que eu faço?

  11. fodasticfilms disse:

    Ou clau , não da certo no meu
    Pq o meu template é assim: http://fodasticfilms.blogspot.com/

    QUe que eu posso fazer ein?

  12. .:: Clau ::. disse:

    Andreza
    Tais recursos podem variar de template para template. Sendo assim, não tenho como te ajudar.

  13. Andreza disse:

    Oi Clau, naum consigui colocar a imagem do lado dos links, me ajuda por favor, vlw.

  14. .:: Clau ::. disse:

    Vida em Cristo
    No tutorial tem o código para vc personalizar o gadget e aplicar estilos a ele, desta forma vc ajusta as medidas ali naquele trecho q está no tutorial em: "Aplicar estilos"

  15. Vida em Cristo disse:

    Cláu, desculpe-me, mas coloquei os arquivos relacionados no meu mais to com problema… Ele ficou muito em cima, tentei baixar com quebras de linha mais não consegui…

    Como faço? Podes me ajudar…??

    https://dl.dropbox.com/u/4828129/CATIT%C3%83O/%C3%8DCONES/veja%20tambem.JPG

    Queria colocar mais um poquinho embaixo, pra ficar mais destacado e bonito…

    Plis, te amo!

  16. .:: Clau ::. disse:

    sonataescarlate
    Esta tag é fechada em alguns templates e em outros não…não há como eu saber como ela se apresenta no template de cada um. Eu já havia criado um artigo explicando sobre isso, inclusive lá eu citei todas as opções de como as tags podem estar, e coloquei o link pra este artigo no tutorial, justamente para orientar aqueles q não conseguirem localizar a tag deste tutorial. Agora vai de cada um ler o artigo que citei ou não,né?rs
    Sobre os links, eu acabei de incluir no tutorial, o trecho CSS para ser aplicado os estilos aos link.
    Obrigada pelo comentário e pela sugestão. Volte sempre!

  17. sonataescarlate disse:

    Excelente! Porém, se me permite Clau, o artigo requer uma correção:
    div class='post-footer-line post-footer-line-3'
    Essa linha não existe dessa maneira, essa tag div está encerrada no template do Blogger ( div … / ), por isso o Lukas não conseguiu achar a linha.

    Gostei muito não só da funcionalidade, mas da aparência. Você colocou como mudar a aparência do título ("Artigos …"). Existe alguma forma de mudar a aparência dos links?

    E muito bom seu blog. As opções são sempre de bom gosto.

  18. oantromusical disse:

    Esse também foi muito útil!
    Eu já usava o "leia mais", mas não compreendia o código.
    Agora além de inserir um "Leia mais" de verdade (antes era "Posts relacionados), eu pude destacar a coisa!

    E ainda consegui mexer no css para dar respiro no topo e "endentar" a lista de posts!

    Valeu mesmo, Clau!

  19. Admin disse:

    brigadao

  20. .:: Clau ::. disse:

    Admin
    Dá uma olhada no meu menu Tutoriais Blogger e procura pelo link do artigo:
    "Escolhendo o local para instalar elementos na área dos artigos". Lá vc vai encontrar outras opções de locais para vc instalar o código. Vc vai ter q fazer testes até ficar do jeito que vc quer.

  21. Admin disse:

    CLAU -> O meu funciono perfeitamente so que ta com um problema ?

    eu queria colocar ele de baixo da postagem sera que você pode me ajudar help!

    olha como taa

    imagen: http://img94.imageshack.us/img94/8356/imagemcii.png

    me ajuda aiii queria colocar em baixo com as imagens nao to conseguindo espero ser atendido rapidamente vlw

  22. .:: Clau ::. disse:

    Lukas
    Tem sim, procure direitinho que vc acha.

    Admin
    Não tenho como ajudar, deve ser problema no seu template e não há como eu saber exclusivamente o que aconteceu no seu, para cada caso é um caso.

  23. Admin disse:

    o Clau Me Ajuda ai com o meu o meu nao tem esses me ajuda ai clau to sofrendo pra por esses artigos no meu blog =/ Help Help!

  24. Lukas disse:

    clau,no template blood dark,não tem a linha post footer line 3

  25. Edson _ Need disse:

    Ta salvando a vida do meu blog… hehe… se quiser ver como ta ficando com as suas dicas… http://www.catitao.com

  26. ::Clau:: disse:

    @MatsoThiago:
    Obrigada pelo comentário! =)

  27. @MatsoThiago disse:

    Muito bom o blog! Procurei no Google alguns mas não deu certo, só aqui mesmo para eu conseguir. =)

    Parabéns pelo blog, Van! ^^

  28. Cláudia Charão disse:

    Oi!
    Nossa eu adoro o seu blog, já consegui colocar vários acessórios no meu e outras arrumações, inclusive o desse post, mas eu mudo o nº para aparecer menos de 10 artigos e não adianta, aparece até mais de 10 – o que posso fazer?

    Muito obrigada e parabéns pelo site 😉

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.