Postagens relacionadas no final do post

02:55

footer

Olá meus amores, hoje trago um tutorial que vocês me pedem muito aqui no blog que é como colocar postagens relacionadas no final do post. Lembrem-se de fazer o backup do seu layout ou testar em um blog de teste, combinado?

Ele ficará assim:
footer do post

Os créditos do tutorial estão mantidos no código. Então, vamos lá?

Dentro da caixa de codigos HTML do seu blog, procure por: </head>

ACIMA DELE COLE:

<!--Postagens relacionadas para blog by elainegaspareto.com-->
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>
<style type='text/css'>
#related-posts{
float:left;
width:auto;margin-left: 24px;}
#related-posts a{
border-right: 0px dotted #eaeaea;}
#related-posts h4{
margin-top: 10px;
background:none;
font:17px Montserrat;
padding:3px;
color:#000;
text-transform:uppercase;
text-align: center !important;}
#related-posts .related_img {
margin:10px;
border:2px solid #f2f2f2;
object-fit: cover;
width:140px;
height:130px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px; }
#related-title {
color:#222;
text-align:center;
text-transform:none;
padding: 0px 5px 10px;
font-size:13px;
width:150px;
height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<!--Final do script das Postagens relacionadas para blog by elainegaspareto.com-->


Feito isso, PROCURE POR: 
<div class='post-footer-line post-footer-line-3'>

Se no seu blog tiver dois desse código, vamos usar a segunda opção.

COLE ABAIXO DELE:

<!-- Postagens relacionadas para blog by elainegaspareto.com- Início do código HTML-->
<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_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
  var relatedpoststitle=&quot; Fique mais um pouco! Veja também:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
<!-- Postagens relacionadas para blog by elainegaspareto.com- Final do código HTML-->


Salve, e confira se esta ok!
Eu fiz o teste em dois blogs de teste no MODELO VIAGEM do Blogger.

Espero que vocês tenham gostado. 

Você pode gostar também

15 comentários

  1. Ameeeei, arrasou heim! Me ajudou demais <3 Beijos

    blogaryanevih.blogspot.com

    ResponderExcluir
  2. Amei renata muito obrigada,ficou lindo no meu blog beijos
    https://meninaencanta.blogspot.com.br/

    ResponderExcluir
  3. oi Renata o meu não ta indo estou usando o seu layout unissex. e to seguindo o tutorial mas não acontece nada oque fiz errado me ajude.

    www.divasattelier.com

    ResponderExcluir
  4. re isso vai muda os marcadores e tudo mais ???

    ResponderExcluir
  5. Como faço para não aparecer na página principal?

    ResponderExcluir
    Respostas
    1. O meu tbm esta aparecendo na pag. princ. e gostaria de saber como tirar.

      Excluir
  6. o meu apareceu os ícones mas tem como clicar e ir para o outro, você pode me ajudar?

    ResponderExcluir
  7. ADORO ESSE BLOG♥ DIVULGO COM GOSTO COM MAIOR CARINHO DO MUNDO

    ResponderExcluir
  8. Adorei <3

    se quiserem dar uma olhadinha no meu blog <3
    https://meumundoaoladososeu.blogspot.com.br/

    ResponderExcluir
  9. eu não estou conseguindo, por mais que tenha colocado o código as postagens relacionadas não aparecem, alguém pode me ajudar?

    ResponderExcluir
  10. Oi. Como faço para exibir lado a lado na versão mobile? porque eles aparecem um embaixo do outro, aí ocupa muito espaço. Ou, se não houver como, como faço para ocultar na versão para celular? Obrigado!

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda