Artigos relacionados com miniatura de imagens

O site LinkWithin já havia oferecido um serviço como este mas como blogueiro é gente curiosa e inquieta, já houve quem o aperfeiçoasse. Blogger Plugins agora nos ensina como colocar direto no blog os tais posts relacionaods com miniatura de imagem. Serve para o blog antigo e para o novo, implementado em junho de 2010. Vamos então aprender ?


Vá até o HTML de seu blog e procure pelo seguinte código:

</head>

Acima dele cole este código abaixo
*se quiser que os artigos apareçam na primeira página, apague o código na cor rosa

<!--Posts Relacionados com Miniaturas-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0iQ_v_AD6G1DnVv3BlFQXubABLYvXdXXJ0fpnaeCL9MEVIDHleNmj5IynLHZ7Me289_9cFEyZGMWiUWPYTRxI8nbW7Sy1z8l3xrQfGzbwy0YlR3P2d80KWdvz-Fn0kdZ2SKHCh_i1M5o/s400/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#CCCCCC&quot;;
var relatedpoststitle=&quot;Posts Relacinados&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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0iQ_v_AD6G1DnVv3BlFQXubABLYvXdXXJ0fpnaeCL9MEVIDHleNmj5IynLHZ7Me289_9cFEyZGMWiUWPYTRxI8nbW7Sy1z8l3xrQfGzbwy0YlR3P2d80KWdvz-Fn0kdZ2SKHCh_i1M5o/s400/noimage.png"}}}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="#d4eaf2"}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:86px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:86px;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>
<!-- remove --></b:if>
<!--Fim  Posts Relacionados com Miniaturas-->

Agora clique em "Expandir modelos de widget" e procure pelo código abaixo:

<div class='post-footer-line post-footer-line-1'>

Se não encontrar este acima, tente este outro.

<p class='post-footer-line post-footer-line-1'>


Em ambos os casos, depois do código, aplique todo este trecho abaixo.

<!--Código Posts Relacionados com Miniaturas-->
<!-- remove --><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><div style='clear:both'/>
<!-- remove --></b:if>
<!--Código Posts Relacionados com Miniaturas-->

Agora para dar estilo procure por:

 ]]></b:skin>

E antes dele cole o seguinte código:


/*Posts relacionados---------------------------------------------*/
#related-posts {
text-align:center;
text-transform:none;
height:100%;
min-height:100%;
padding:10px 0 15px 0;
margin: 20px 5px 0 5px;
background: #ffffff;
}

#related-posts h2{
font:16px Oswald;
text-shadow:0 1px 1px #ccc;
text-align: center;
color: black;
margin-bottom: 0.35em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
text-shadow:0 1px 1px #ccc;
background: #ffffff;
border: 1px dashed #000;
 padding: 10px; margin: 22px 2px; width: 90px; height: 180px;  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
#related-posts a:hover{color:black; background-color:#ccc;
}