Entradas Relacionadas con imágenes en miniatura para Blogger

Hace unos días me preguntaron a través de Facebook que como hacer para que aparezcan entradas relacionadas debajo de cada post, pues os diré que la entradas que yo utilizo ya venían integradas en la plantilla, pero eso no quiere decir que no se pueda integrar en alguna otra plantilla, así que me he dado la tarea de hacer el siguiente tutorial.

Para instalarlo sin depender de scripts en alojamientos externos, he incluido el susodicho de manera que quedará en nuestra plantilla. Comenzamos en Diseño > Edición de HTML y pinchamos en "Expandir plantillas de artilugios". Localizamos el </head> y justo antes copiamos el script y el código para configuración CSS.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
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 thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmV-80m3afQLeumEnVGBVvb-qp_nwxgNahHb4IhszF03yId_7oxTjGxPP3wYUSzSbbG-0dQPtu_k5U_-G36qFGFVcqYyjpzD1ez8FjMTeqviPlxMKm6s40zzLoeJX2QfRoO485ueL-5HM/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() {
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);
}}
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 #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;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>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>
');
}
//]]>
</script>
</b:if>

Una vez hecho lo anterior, seguimos hacia abajo y buscamos el lugar dónde queremos que aparezcan los enlaces. Allí pondremos el siguiente código. Lo normal será que lo pongamos en el pie del post (post-footer) y si tenemos plantillas clásicas, dentro de post-footer post-footer-line-3. Si tenemos ya algo metido ahí, pues lo colocamos a continuación para que esto salga lo último.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Posts relacionados";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Si guardamos, ya tendremos disponible nuestras entradas relacionadas con imágenes en miniatura. No las podremos apreciar los cambios con Vista Previa, porque tanto en el script como en la parte HTML, se ha incluido una condición para que sólo sea visible en las entradas individuales (item). Habrá que acceder a una entrada cualquiera para poder verlo en funcionamiento.

En esta última parte de código, var maxresults sirve para indicar el número de entradas relacionadas que queremos mostrar y var relatedpoststitle, para el texto que queremos mostrar delante de ellas. Las características de fuente, fondo y efecto hover, se puede configurar desde la primera parte del primer código facilitado aquí.