Añadir articulos relacionados con imagenes miniaturas a tus entradas

En el articulo  Añadir articulos relacionados a tus entradas Blogger ya vimos como añadir articulos relacionadas en forma de lista y ordenados por categorias utilizando un codigo html. Este codigo fue mejorado incluyendo imagenes en miniatura, resultando mas atractivo para el visitante; eso es lo que se pretende, quedando asi.

Otra ventaja de este widget; aparte de mostrar las imagenes en miniatura,es aque nos muestra una imagen si el articulo o la entrada no tiene ninguna. Este widget fue desarrollado por bloggerplugins.

• Para integrarlo en nuestro blog blog accedemos a Diseño>Edicion HTML> Expandimos lo artilugios, pulsa F3 para ejecutar el buscador del navegador; buscamos </head>  y justo antes pegamos el siguiente codigo, que te dejo en la siguiente pagina.
  
  
• Ahora Buscamos la siguiente linea en el codigo html de nuestro blog:

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

• Sino la encuentra busca la siguiente:

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

• Pegamos el siguiente codigo justo despues:

<!-- Articulos relacionados con miniaturas -->

<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Artículos relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

<!-- Articulos relacionados con miniaturas -->

• Ahora tenemos poner el numero de articulos relacionados a mostrar, lo podemos cambiar en var maxresults=6; .
• Para terminar tenemos que configurar la distancia entre las imagen en miniaturas, buscamos:

                           ('<a style="text-decoration:none;padding:5px;float:left;');

• Cambiamos 5px por la cantidad de pixeles deseada.

Como veis es muy facil de implementar; y muy atractivo para el visitante.

Lo tienes implementado? Cuentanos tu experiencia