Artigos relacionados com imagens para templates responsivos

Este código de artigos relacionados com imagens, é compatível apenas com blogs hospedados na plataforma Blogger. As imagens dos artigos relacionados se ajustam conforme a resolução da tela em que o seu blog está sendo exibido. O título do artigo aparece somente quando o usuário passar o cursor do mouse sobre uma das imagens dos artigos relacionados (ver imagem abaixo).



É bem simples de instalar, não há necessidade de fazer modificações no código; você poderá ajustar alguns pequenos detalhes ou se desejar, poderá fazer grandes modificações neste código!

Acesse o painel de controle do Blogger e, escolha a opção "Modelo" ==> "Fazer backup/Restaurar" ==> "Fazer download do modelo completo".

Ok, agora que você já fez backup do template do seu blog, não precisa se preocupar, caso dê algum erro, será possível recuperar o blog.

Agora, clique em "Editar HTML". Procure por "]]></b:skin>" e, cole acima dessa linha o código CSS que está logo abaixo:

#related-posts{clear:both;margin:20px 0 0;width:100%}

#related-posts h3{font-family:Arial,sans-serif;font-size:20px;font-weight:500;text-shadow:0 0 1px rgba(0,0,0,0.5);-webkit-font-smoothing:antialiased;text-transform:uppercase;line-height:40px;padding-top:20px;color:#000}

#related-posts .title-border{margin:20px 0}

#related-posts ul li a,#related-posts li a .title h4{color:#fff;font-size:12px;line-height:1.2em;padding:0;margin:0;outline:0;list-style:none;outline:none;border:0 none;font-weight:400;font-size:13px}

#related-posts ul{margin-bottom:20px;padding:0}

#related-posts ul li{list-style:none;overflow:hidden;float:left;margin:0 5px 5px 0;width:210px;height:130px;font-size:13px;color:#fff;position:relative}#related-posts ul li:last-child{margin:0 0 10px}

#related-posts li .thumb{width:210px;height:130px;overflow:hidden}

#related-posts img{width:100%;height:auto;min-height:140px;float:left;margin:0;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s}

#related-posts img:hover{opacity:1}

#related-posts li .thumb img{height:auto;width:100%;padding:0;transition:opacity .8s ease-in-out;-moz-transition:opacity .8s ease-in-out;-webkit-transition:opacity .8s ease-in-out}#related-posts li{background:#fff}

#related-posts li .title{opacity:0;visibility:hidden;padding:0;margin:0 auto;font-family:Roboto,sans-serif;color:#fff;margin-bottom:0;text-transform:none;position:absolute;text-align:center!important;font-size:10px;font-weight:200;padding:0;margin:0 auto;position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:1px solid #fff;display:block;line-height:100%;color:#fff!important;text-transform:uppercase;text-decoration:none!important;opacity:0;z-index:1;transition:all .1s ease-in-out;-webkit-transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s;-webkit-transform:scale3d(1.4,1.4,1);transform:scale3d(1.4,1.4,1)}

#related-posts li:hover .title{opacity:1;visibility:visible;z-index:2;background-color:rgba(0,0,0,0.6);webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);font-weight:400}

#related-posts li .title span{color:#f0f0f0;position:absolute;width:92%;height:20px;top:40%;left:0;right:0;text-align:center;margin:0 auto;margin-top:-10px;line-height:normal}

Estes valores "width:210px;height:130px;" correspondem à largura e altura das imagens dos artigos relacionados.

Agora, procure por "</head>" e, cole acima dessa linha o código javascript que está logo abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'><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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPtbfrXxLB7hkNQ_6i0fKTl9lsRgNJZ1TVBKUam0V02RhvaFKOFaxtf1dmH-eGCINJN_LdDjoi8miFcVMm1ocUxdj_1j69MLQcpv4VKWOnYYZTjFQKmjs_HHuVv0viQBoEs9A28ZbDoi1z/s1600/nophoto-custom.jpg'}if(relatedTitles[relatedTitlesNum].length>165)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('<h3><span>'+relatedpoststitle+'</span></h3>');document.write('<ul>');while(i<relatedTitles.length&&i<120&&i<maxresults){document.write('<li><a style="float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><div class="thumbR"><img src="'+thumburl[r]+'"/><div class="title"><span><h4>'+relatedTitles[r]+'</h4></span></div></div></a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}

      
//]]>


  </script></b:if>

Para finalizarmos, procure por "<div class='post-footer'>" ou "<div class='post-footer-line post-footer-line-1'>" e, adicione este código abaixo, logo acima de uma dessas linhas. Salve o template.

<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=999&quot;' type='text/javascript'/>

</b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=6;

var relatedpoststitle=&quot;Artigos Relacionados&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script></div><div style='clear:both'/>

</b:if>

A linha "var maxresults=6;" controla a quantidade de artigos que serão exibidos no gadget - nesse caso, temos "6". Você também pode trocar ou deletar o título do gadget "Artigos Relacionados".

Para os artigos relacionados aparecerem no final dos posts, é necessário achar o local correto dentro do código fonte do template do seu blog. Por isso, é importante que você localize essa área com precisão! Alguns templates baixados da Internet, estão bastante alterados - para fazer o código funcionar corretamente num template baixado da Internet, eu tive que instalar esse código acima, abaixo de "<data:post.body/>". Caso você tenha algum problema com "<div class='post-footer'>" ou "<div class='post-footer-line post-footer-line-1'>", tente instalar o último código, logo abaixo de "<data:post.body/>". Espero que você consiga instalar esse gadget no seu blog.