SOCIAL MEDIA

09/09/2016

Colocando Posts Relacionados no blog


Oii gente! Hoje o blog completou 20.000 visitas pouco dias depois de completar 5 meses de existência <3 e eu quero agradecer a todos os que o acompanham. Saibam que estou com muitos projetos em mente e quero levar o De Cara com a Juh para outras conquistas, mas...

Vamos falar do agora. Nossa, quanto blá blá blá eu faço antes de um simples tutorial.

O tutorial que estou passando hoje é de um código para posts relacionados. Sabe quando você abre um post pra ler e logo no final dele aparecem miniaturas de posts com a mesma temática? Isso acontece porque o tal código seleciona posts marcados com a mesta tag do post que você está lendo para aparecerem e chamarem a atenção do leitor. Ele é muito importante para fazer com que seus leitores naveguem no seu blog por mais tempo e diminua a taxa de rejeição do seu blog.

O código que eu trouxe tem esse resultado:


Agora, vamos aos códigos!

1. Vamos adicionar o CSS do código no CSS do seu blog. Vá em Modelo > Editar HTML, tecle Ctrl+F e procure por ]]></b:skin>.

Acima dessa parte coloque o seguinte código:

<!-- CSS POSTS RELACIONADOS WWW.DECARACOMAJUH.COM --> #related-posts img  { width: 180px!important; /*--tamanho da largura da miniatura--*/ height: 120px!important; /*--tamanho da altura da miniatura--*/ } #related-posts a  { width: 180px!important; /*--tamanho da largura da miniatura--*/ } #related-posts h2 { color: #333; /*--cor da fonte do título Posts Relacionados--*/ font-family: georgia; /*--fonte do título--*/ font-style: italic; /*--apague esta parte para que o texto não apareça em itálico ou personalize do jeito que você quiser--*/ font-size: 24px; /*--tamanho da fonte--*/ line-height: 30px; /*--altura da linha--*/ padding-bottom: 20px; /*--demais códigos são margens e espaçamento, altere se precisar--*/ font-weight: 400; margin-top: 40px; margin-bottom: -10px; margin-left: 5px; padding-top: 30px; } #related-posts { border-bottom: 1px solid #000; /*--linha que aparece abaixo das miniaturas,separando do resto da página--*/ width: 600px; /*--tamanho da linha--*/ float: left; } <!-- FIM CSS POSTS RELACIONADOS WWW.DECARACOMAJUH.COM -->

No código você encontra indicações do que você pode personalizar.

2. Procure por  </head> e logo acima coloque este código:

<!-- POSTS RELACIONADOS WWW.DECARACOMAJUH.COM --> <script type='text/javascript'> var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;; var maxresults=3; var splittercolor=&quot;#fff&quot;; var relatedpoststitle=&quot;Posts Relacionados:&quot;; </script> <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.media$thumbnail.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 {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg";} } 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(current) { var splitbarcolor; if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD"; for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==current)||(!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('<h2>'+relatedpoststitle+'</h2>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) { document.write('<a style="text-decoration:none;padding:5px;float:left;'); if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"'); else document.write('"'); document.write(' href="' + relatedUrls[r] + '"><img style="width:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>'); i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } document.write('</div>'); relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } //]]> </script> <!-- POSTS RELACIONADOS WWW.DECARACOMAJUH.COM -->

Onde estiver escrito var maxresults=3 é a indicação de quantas miniaturas aparecerão. Mude o número "3" para o número de miniaturas que desejar.

Onde estiver escrito Posts Relacionados: você pode apagar e substituir por outra frase que goste, como "Leia também" e etc.

3. Procure por post-footer-line post-footer-line-1
O código <div class='post-footer-line post-footer-line-1'> aparece duas vezes. Abaixo do SEGUNDO código você adiciona este código: 

<!-- POSTS RELACIONADOS WWW.DECARACOMAJUH.COM -->
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div></b:if>
<!-- POSTS RELACIONADOS WWW.DECARACOMAJUH.COM -->

Em vermelho: Se você quer que as miniaturas de posts relacionados apareçam na página inicial e não apenas quando clicam no link de um post, apague todos os códigos que estão em vermelho.

Espero ter ajudado e façam bom proveito! :D

comentário(s) pelo facebook:

16 comentários :

  1. Já uso e adoro! É muito bom pro nosso público conhecer outros trabalhos nossos ^^
    boa semana :)

    Red Behavior

    ResponderExcluir
  2. Grande ajuda :) Hoje em dia e raro encontrar bloggers que ajudem assim :)
    Continue com o excelente trabalho :)
    Bjsssss

    https://matildeferreira.co.uk/

    ResponderExcluir
    Respostas
    1. Sempre é bom poder ajudar! Muito obrigada pelo apoio <3

      Excluir
  3. Juh como faço para fixar um pulblicação em determinda pagina?
    Exemplo:Para pulblicar informação de sobre mas não ficar na pagina inicial?
    bjss
    http://surpresadebeleza.blogspot.com.br/

    ResponderExcluir
  4. Eu adorei a dica, é um tutorial que ajuda muito o leitor a se encontrar no blog, eu vou usar!
    http://m-onologo.blogspot.com/

    ResponderExcluir
  5. Parabéns pelas 20.000 visitas, tu merece e vai vir muito mais ^^
    Passei pra te avisar que coloquei um post teu lá no 'Links da Semana', espero que goste, heheh
    Beijo!

    Sorriso Espontâneo

    ResponderExcluir
  6. Posts relacionados são muito úteis e melhoram bastante a navegabilidade nos blogs. É uma ferramenta ótima para fazer com que os leitores permaneçam mais tempo consumindo conteúdo relevante para eles.
    Boa dica!
    Beijo,
    http://www.criativissimo.com

    ResponderExcluir
  7. Voce sempre sendo maravilhosa e ajudando um monte de gente, hein? amei <3

    ResponderExcluir
    Respostas
    1. Que linda *_______*
      Muito obrigada por isso! Espero poder ajudar sempre que possível.
      Beijão

      Excluir
  8. Acho muito maravilhoso quem faz tutorial dessas coisas úteis pra blog, sabia? Eu vou sempre fazendo tudo no chute, não saberia ensinar ninguém, hahaha.

    blogdeclara.com

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado!
      Cada um ajudando as pessoas na maneira que pode né, hehe, com certeza você arrasa na escrita dos seus posts <3.
      Beijos

      Excluir