Novo!! Artigos Relacionados no Final das Postagens do Blogger

Coloque artigos relacionados no final das postagens de seu blog com um estilo que vai te encantar.

Para manter os visitantes "presos" em seu blog nada melhor do que mostrar mais opções que eles possam gostar, e, que tal fazer isso com um estilo bem fora do tradicional? É esse o objetivo desse widget artigos relacionados que apresentamos para você. Além de mostrar novas opções de seu blog, ele tem um estilo elegante, charmoso, diferente e todos os adjetivos que você possa encontrar para destacá-lo. 

Na imagem de apresentação você já pode ter uma noção de como ele ficará em seu blog. Note que ele mostra as imagens das postagens relacionadas e dentro, os títulos das mesmas. Além disso ele contém um efeito de revelar ao passar o mouse.

Então, se você gostou desse widget bem completo, veja a seguir como instalá-lo em 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.

Colocando em seu blog

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

2- Clique no código de seu template, pressione "CTRL+F" e pesquise por </head>

3- Logo ACIMA da tag pesquisada, cole o seguinte código:

<script type='text/javascript'>
//<![CDATA[
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
var relnojudul = 0;
var relmaxtampil = 4;
var numchars = 200;
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 var relmaxtampil = 4; altere o 4 para o número de postagens relacionadas que você desejar que apareçam.

4- Pesquise agora por ]]></b:skin> e logo ACIMA dessa tag, cole o seguinte código:

/*----------- CSS POSTS RELACIONADOS ----------*/
#related_posts h4{margin:0;padding:0;font-size:200%;height:39px;color:#181818}
#related_posts{overflow:hidden;margin-top:30px}
#relpost_img_sum{margin:0;padding:0}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none;background:none;margin:0;padding:0}
#relpost_img_sum li{overflow:hidden;margin:0;padding:0;height:124px;list-style:none;width:49.5%;float:left;margin-right:2px;margin-bottom:2px}
#relpost_img_sum li:nth-child(odd){margin-right:2px}
#relpost_img_sum .news-title{font-weight:bold !important;display:block;position:relative;margin:1px}
#relpost_img_sum li .relinkjdulx{position:absolute;font-size:140%;color:white;left:15px;line-height:20px;bottom:30px;text-shadow:0 1px 0 black;z-index:2}
#relpost_img_sum .news-text{display:block;text-align:left;text-transform:none;position:absolute;left:-9999px;bottom:-9999px;font-weight:normal}
#relpost_img_sum img{float:left;width:100%;height:180px;position:absolute;bottom:-30px}
.bwh-title{overflow:hidden}
.overlayb{width:100%;height:200px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfPmYcco4Tg3UQPHKIel6oYjJhI5elX2z-SZHWVMZCiK185GLpuJ3sUv8_gwkTscjZ_UlvEomOmlYxcS4C61W8OgClOuNM8T5-wRRvBpi9kHum1CkLGfJti4B_W-VR2-CLkLDR7MtyM4c/s1600/linebg-fade.png);z-index:1;position:absolute;background-position:0 0;background-repeat:repeat-x;bottom:-10px}
#relpost_img_sum li:hover .overlayb{-khtml-opacity:0;-moz-opacity:0;opacity:0}

5- Agora pesquise por <div class='post-footer-line post-footer-line-3'>

6- Logo ABAIXO da linha pesquisada, cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
          <h4>Postagens Relacionadas</h4>
          <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=4&quot;' type='text/javascript'/>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
     </div>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"");d[a].width=b;d[a].height=b}}resizeThumb("related_posts",328);
//]]></script>
</b:if>

* Em Postagens Relacionadas, altere para um titulo de seu gosto caso desejar.

* Em max-results=4, altere o 4 para o número de postagens relacionadas que você desejar que apareçam.

7- Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

8- Vá em seu blog e veja como ficou.

 Observação: Esse widget só funcionará se seu blog tiver marcadores nas postagens.

Gostou? Comente. O seu comentário é a motivação para nosso trabalho.