6 de fevereiro de 2017

Links de postagens relacionadas no meio dos artigos no Blogger

Tags

Hoje vou ensinar uma dica muito útil, com ela será formado uma lista no meio da sua postagem, com links de posts relacionados. Isso pode melhorar muito o tráfego do seu blog.


A instalação é fácil, porém deve ser feita com bastante atenção. Aqui vou mostrar dois estilos diferentes de listas para você aplicar em seu blog.

Veja também:

Como colocar Posts relacionados nos artigos automático

Vamos lá, siga atentamente os passos abaixo.
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até Modelo > Editar HTML do seu blog desejado, clique sobre o editor e tecle CTRL+F e procure por </head> e imediatamente acima, cole:
  3. 
    <b:if cond='data:blog.pageType == "item"'>
    <script type='text/javascript'>
    //<![CDATA[
    var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
    //]]>
    </script>
    </b:if>
    
  4. Escolha um modelo abaixo e cole o código acima de ]]></b:skin>
  5. 
    /* Postagens Relacionadas Modelo 1  - CódigoBlogger.com */
    .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
    .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
    .related-simplify ul{margin:0;padding:0}
    .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
    .related-simplify ul li:nth-child(odd){background:#fefefe}
    .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
    .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
    .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
    .related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
    .related-simplify a:hover{color:#0383d9;text-decoration:underline}
    .related-simplify ul li:nth-child(n+4) {display:none;}
    @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
    @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
    
    
    /* Postagens Relacionadas Modelo 2  - CódigoBlogger.com */
    .related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
    .related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
    .related-simplify ul{margin:0;padding:0}
    .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
    .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
    .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
    .related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
    .related-simplify a:hover{color:#0383d9;}
    .related-simplify ul li:nth-child(n+4) {display:none;}
    @media only screen and (max-width:768px){
    .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
    .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
    .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
    .related-simplify ul li{padding:5px 0}
    .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
    
  6. Agora procure por <data:post.body/> e substitua todo o trecho encontrado por:
  7. 
    <div expr:id='"post1" + data:post.id'/>
    <div class='related-simplify'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <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=3"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <h4>Leia também</h4>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </div>
    <div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
    <script type='text/javascript'>
    var obj0=document.getElementById("post1<data:post.id/>");
    var obj1=document.getElementById("post2<data:post.id/>");
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf("<br>");
    if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>
    
  8. Agora clique em Salvar modelo
Pronto, agora a lista vai ser exibida em todos os posts, mas ela vai sempre mostrar links relacionados a sua postagem, legal né?

Dúvidas? deixe um comentário abaixo.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

7 comentários

Error; The reference to entity "callback" must end with the ';' delimiter.

Flávio,

Converta o código aqui: http://www.codigosblogger.com/p/conversor-de-codigo-adsense.html

E cole no lugar indicado.

Abs

No meu template tem várias tags . Qual devo substituir.Obrigado! Abraços!
Paulo César

Olá,

Normalmente é na segunda tag encontrada, porém isso pode variar. Por isso substitua todas as tags até funcionar.

Erro ao analisar XML, linha 3040, coluna 94: The reference to entity "callback" must end with the ';' delimiter. Ocultar notificação

Substitui todas as tags mas não de certo...deu erro.


Abrir lista de emoticonFechar lista de emoticon