Añadir Entradas Relacionadas con miniaturas a tus entradas en Blogger

Puede ser interesante la incorporación de un apartado de entradas relacionadas al finalizar una entrada del blog con el fin de mostrar a los visitantes posibles contenidos que también le puedan interesar dentro del sitio. Curiosamente Blogger no ofrece aun esta funcionalidad de forma nativa en la configuración de sus entradas si bien a lo largo de los años han ido apareciendo diferentes widgets o códigos para insertar en la propia plantilla que tengamos activada.

La opción de insertar un código dentro de la plantilla normalmente ofrece una mayor posibilidad de personalización respecto al número de entradas relacionadas a mostrar o la forma en que lo hagamos y los pasos para llevarlo a cabo son relativamente sencillos.

Insertando Entradas Relacionadas en nuestra plantilla del blog

CSS y Javascript de Entradas Relacionadas

En primer lugar deberemos ir a nuestro escritorio de Blogger y desde ahí acceder al blog en el que estemos interesados añadir el código accediendo a la sección de Plantilla para posteriormente elegir Editar HTML donde una vez mostrado el código de nuestra plantilla buscaremos el final de la etiqueta head, </head> e insertaremos el siguiente código.

<!--Entradas Relacionadas-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}

#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}

#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>

<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXYfFzjR1RFV6uRaecq4aaLj47GO55UwOWvxq-pNPvssYY7E1aDyhS83cDHJbsDP28K1gmt2jOQB-yTrxF2mEWbqp0APfRCxZxxZ0uG2iC74xWSXmyBAT26s-U_1ouEM3BxtKJwjxr7P1X/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Entradas Relacionadas&quot;;
</script>

<!-- <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger3.js' type='text/javascript'/> -->

<script>
//<![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/AVvXsEjoT3_fpemq1Tmyubs6A4oWnDUP3CVSFUI3dujjMozmZCwO8ShIuQ824EsLbU79KpSLoKcAi_F5nDj3xXX5382VUnU72GuYrVlNNnGaEK2gwNooLLRkQAFFSbqLJuVuQuV4uhixeIK_Mxvy/s1600/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:96px;height:96px;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>');
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>
<!--Fin de Entradas Relacionadas-->

Personalizando el Javascript de Entradas Relacionadas

El inicio es simplemente el estilo con el que queremos mostrar la sección pudiendo editarse al gusto ya de cada uno, luego si se observa dentro del código aparece comentada la siguiente línea

<!-- <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger3.js' type='text/javascript'/> -->

Esto se debe a que buscando encontré un javascript que ya realizaba la función para mostrar las entradas relacionadas, de hecho existen bastantes en las que solo varían datos de personalización a la hora de mostrarlos, aunque como no se ajustaban a la forma que quería para el blog opte por insertar el script en la plantilla que es lo que se muestra entre las etiquetas

<script>
//<![CDATA[
<!--Javascript de Entradas Relacionadas-->
//]]>
</script>

Como se muestran las miniaturas en pantalla

Dentro del propio javascript una de las líneas más interesantes a editar puede ser

document.write(' href="' + relatedUrls[r] + '"><img style="width:96px;height:96px;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>');

Que muestra el formato en que aparecerá en pantalla cada caja de entrada relacionada pudiendo editarse el tamaño al gusto de cada uno modificando los valores correspondientes a los diferentes atributos. Otra de las líneas que se podrían editar por temas visuales son las correspondientes a la URL de la imagen a mostrar si no hay coincidencias

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoT3_fpemq1Tmyubs6A4oWnDUP3CVSFUI3dujjMozmZCwO8ShIuQ824EsLbU79KpSLoKcAi_F5nDj3xXX5382VUnU72GuYrVlNNnGaEK2gwNooLLRkQAFFSbqLJuVuQuV4uhixeIK_Mxvy/s1600/noimage.png

Número de entradas y titulo del bloque

Esta nos muestra una imagen que se pondrá en el caso de que la entrada no disponga una propia con la que generar una miniatura.Fuera del javascript en el mismo código a nivel de visualización de resultados son importantes también

var maxresults=5;

var relatedpoststitle="Entradas Relacionadas";

Donde “maxresults” es la variable con la que asignamos el número de entradas relacionadas que queremos mostrar y “relatedposttitle” será el titulo del apartado de entradas relacionadas dentro de la entrada del blog.

Código para mostrar en pantalla Entradas Relacionadas

Terminada la parte anterior buscaremos dentro del cuerpo, body, de la plantilla la siguiente línea

<div class='post-footer'>

Puede estar duplicada en cuyo caso deberemos buscar la segunda que aparezca en la búsqueda y justo encima de esta insertaremos el siguiente código.

<!--Entradas Relacionadas-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'><br/>
<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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxCk7ua-3cVCj8j6QKzL50iruIelAJjd_zAeliCpwZXhVZdvX3vxU1D4sBlihVTl6R5_HkfnZRH_8Pz1HFx_EVe2Hw4loh-nBqcIFACWEadI2D5OSWtdqh64mXYn9rOkCLzRam91ypHIhe/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!--Fin de Entradas Relacionadas-->

Guardamos la plantilla y comprobamos si los cambios se han efectuado correctamente.