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.
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 != "true"'/>
</b:loop>
</b:if>
E cole o código a seguir logo ACIMA de </b:loop> :
<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=10"' 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 == "item"'>
<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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' 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!
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.
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.
😉
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!!
no meu blog nao funcionou e uma pena estava precisando desse sistema
Vlw deu certo… esse é um dos melhores sites do genero
Ola,
Eu nao consegui achar esse codigo :
Voces pode me ajudar ??
até mais
Sybylla
Fico feliz que tenha gostado e mais feliz ainda pelo comentário e pelo retorno. Obrigada!
Clau, finalmente um tutorial sobre esse assunto que foi fácil de entender e aplicar.
Obrigada.
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!
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?
Ou clau , não da certo no meu
Pq o meu template é assim: http://fodasticfilms.blogspot.com/
QUe que eu posso fazer ein?
Andreza
Tais recursos podem variar de template para template. Sendo assim, não tenho como te ajudar.
Oi Clau, naum consigui colocar a imagem do lado dos links, me ajuda por favor, vlw.
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"
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!
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!
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.
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!
brigadao
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.
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
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.
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!
clau,no template blood dark,não tem a linha post footer line 3
Ta salvando a vida do meu blog… hehe… se quiser ver como ta ficando com as suas dicas… http://www.catitao.com
@MatsoThiago:
Obrigada pelo comentário! =)
Muito bom o blog! Procurei no Google alguns mas não deu certo, só aqui mesmo para eu conseguir. =)
Parabéns pelo blog, Van! ^^
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 😉