Postagens Relacionadas Estilo Lista no Blogger

Veja como é fácil colocar postagens relacionadas no final dos artigos do blog com estilo lista em duas colunas.

Ponto fundamental em um blog, as postagens relacionadas no final dos artigos são cada vez mais utilizadas em todos os tipos de páginas. A sua importância se justifica pelo fato de exibir outros artigos de interesse do leitor e assim fazer com que ele conheça mais postagens do blog em questão.

Nesse artigo, trazemos novamente um código que adiciona postagens relacionadas no Blogger. Com essa ferramenta, aparecerão postagens que tem relação com a atualmente visitada baseando-se nos marcadores, por isso é importante que suas postagens contenha-os pois caso contrário não funcionará. A novidade, é que esse contém um estilo diferente dos anteriormente publicados aqui que pode ser notado na imagem de apresentação.

Falando de seu estilo, essas postagens relacionadas são em forma de “lista” em duas colunas, o que possibilita uma maior identificação por parte dos leitores e também faz com que seu design “fuja” um pouco do habitual. Além disso ele é totalmente personalizável, e você poderá colocar a cor de fundo, do texto, bordas como mais se adequar ao seu gosto e combinando com seu blog.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Colocar "Postagens Relacionadas" no Final dos Artigos do Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

/* CSS Related Posts */
#related_posts h4 {font-family:Oswald;color:#666666;padding:0;margin:0;text-transform:uppercase;font-size:140%;float:left;font-weight:400;}
#related_posts {margin:0;padding:0;margin-bottom:10px;}
.relhead {background:#eeeeee;color:#666666;font-family:Open Sans;font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:10px 15px;text-transform:uppercase;}
#relpost_img_sum .news-text {display:none;}
ul#relpost_img_sum {margin:0;padding:0;}
ul#relpost_img_sum li {float:left;list-style: none outside none;margin:0 14px 0 0;padding:10px 5px 5px 0;overflow:hidden;width:45%;}
ul#relpost_img_sum li a {display:block;}
ul#relpost_img_sum li img {background-color:#5b686a;float:left;margin-right:10px;background: none repeat scroll 0 0 #5b686a;padding:3px;transition:all 1s ease-out;animation:BounceRate 3s;}
ul#relpost_img_sum li img:hover {background-color:#252f31;opacity:0.9;}
ul#relpost_img_sum li a.relinkjdulx {background-image:none;color:#666666;
display:block;font-family:Open Sans;font-size:13px;font-weight:normal;overflow:hidden;padding:10px 5px;text-transform:none;}

* Em AZUL, cor dos títulos das postagens relacionadas.

* Em LARANJA, cor de fundo das postagens relacionadas.

>> Pesquise agora por </head>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 6;
var numchars = 100;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>

* Em AMARELO, quantidade de postagens relacionadas que aparecerão.

>> Pesquise agora por <div class='post-footer'>

* Você poderá encontrar dois trechos iguais, caso encontre opte pelo segundo.

>> Logo ABAIXO do trecho encontrado, cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<div class='relhead'>
          <h4>Postagens Relacionadas</h4>
<div class='clear'/>
          <b:loop values='data:post.labels' var='label'>
               <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
     </div>
</div>
<div style='clear:both;'/>
</b:if>

* Com esse processo, serão exibidas somente nas páginas das postagens, caso deseje também na página inicial, retire a primeira e a última linha do código.

>> Clique em "Salvar Modelo", vá em seu blog e veja como ficou.

Com a conclusão do processo, seu blog já passará a exibir as postagens relacionadas abaixo de todos os artigos, assim adotando mais uma importante função de acessibilidade aos visitantes e fazendo com que eles sempre sejam "informados" de novas possibilidades que possam interessá-lo.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.