Arquivos do Website:

Artigos relacionados sem imagens para blogspot (Blogger)


Esse era o código de artigos relacionados sem imagens, que eu estava utilizado no meu website. O código está funcionando perfeitamente, basta você fazer algumas mudanças para adaptá-lo ao layout do seu blog.


artigos relacionados blogspot blogger
Imagem/Reprodução.

Antes de fazer qualquer mudança no template do seu blog, faça backup do template atual - caso dê algum erro, ou você não gostar da personalização, fica mais fácil recuperar. Acesse o painel de controle do seu blog ==> Modelo ==> Fazer backup/Restaurar ==> Salve o modelo atual.

Depois, clique em "Editar HTML ==> cole o código CSS acima de "]]></b:skin>". Personalize o CSS de acordo com as características do template do seu blog.

#related-posts {

background: #efe;margin-bottom: 20px;margin-top: 13px;padding: 1px 16px 16px;

width: auto;

}

#related-posts ul {

list-style: none outside none;padding-left: 3px;

}

#related-posts li {

color: #8c98a9;list-style: none;padding: 2px 0;

}

#related-posts h2 {

border-bottom: 2px solid #969696;color: #555555;display: inline-block;font-family: arial;

font-size: 14px;margin-bottom: 5px;margin-top: 11px;padding: 3px 3px 2px;text-transform: uppercase;

}

#related-posts a {

color: #5c86f0 !important;font-family: arial;font-size: 18px;padding: 2px 0px;display: inline-block;

}

#related-posts a:hover {

text-decoration: underline;

}


Esse código javascript, você deve colocar acima de "</head>".

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!--Related Posts Start-->

<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(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}


//]]>


</script>

<!--Related Posts End-->

</b:if>


Essa outra parte do código, você deve colocar abaixo de "<data:post.body/>" ou acima de "<div class='post-footer'>". Desta forma, os artigos relacionados irão aparecer no rodapé dos artigos do seu blog.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

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

</b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=8;

var relatedpoststitle=&quot;Veja Também:&quot;;

removeRelatedDuplicates();

printRelatedLabels();

</script></div><div style='clear:both'/>

</b:if>


Possíveis alterações:

a)var maxresults=8;  - Número de artigos relacionados.
b)var relatedpoststitle=&quot;Veja Também:&quot;;  -Título do gadget.

Os templates personalizados e baixados da internet, costumam ser bastante alterados; portanto, nem sempre as linhas de códigos descritas aqui, correspondem exatamente ao rodapé dos artigos no template que você baixou.