Etiquetas relacionadas en miniaturas de Blogger Widgets

Conocimos un Widget para etiquetas relacionadas hace un tiempo, ese widget se añadía de forma muy sencilla, sin embargo siempre nos complicamos la vida y su personalización no estaba al alcance de todos porque los estilos se encontraban en el interior de un script, había que editar el archivo js. y cómo no, saber qué partes modificar, viendo ese archivo a cualquiera se le quitaban las ganas de hacerlo.

Hoy, he visto un widget con las mismas características pero mucho más funcional ya que nos proporciona los estilos y podemos jugar un poco con su apariencia..
Su creador es Aneesh, de Blogger Widget en su entrada nos explica los sencillos pasos a seguir.
Nos situamos en Plantilla Edición de HTML y buscamos </head> justo antes de esa etiqueta pegamos lo siguiente.

Ver código

<!--Related Posts with thumbnails Scripts and Styles Start-->

<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: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Guardamos los cambios y esta vez marcamos para expandir la plantilla. Allí buscaremos la siguiente línea:

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

En lugar de esa línea puede que tengamos la siguiente:

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

En ambos casos añadiremos justo después lo siguiente:

Ver código

<!-- Related Posts with Thumbnails Code Start-->

<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><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 widgets</a>

<script type='text/javascript'>

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

var maxresults=5;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

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

</b:if>

<!-- Related Posts with Thumbnails Code End-->

Donde var maxresults=5; añadiremos la cantidad de miniaturas que mostraremos, hay que tener en cuenta el espacio que tenemos para las miniaturas, si añadimos una cantidad mayor de la que admite nuestro espacio las miniaturas se mostrarán en la siguiente línea.

Para cambiar el título Related Posts podemos hacerlo en:

var relatedpoststitle="Related Posts";

En caso de no querer título veremos más adelante como eliminarlo.

Las imágenes son rotativas, si tenemos un número menor de etiquetas de las añadimos en var maxresults=5; se mostrarán siempre las mismas aunque no en el mismo orden.

Puede darse el caso que no todas las entradas tengan imágenes, pero si la misma etiqueta y que configuramos para mostrar un número mayor a las imágenes existentes.En ese caso, se mostraría la siguiente imagen en lugar de la miniatura.

El widget lo añadimos en las página individuales, el autor indica añadirlo justo después de la línea:
<div class='post-footer-line post-footer-line-1'> 

Podemos mostrarlo después de la información de post-footer, autor, comentarios, etiquetas, sistema de votaciones ect... Si lo añadimos después de:
<div class='post-footer-line post-footer-line-3'>
el widget se mostrará en la última línea de post-footer.

Personalizando los estilos.

Los estilos se encuentran entre:

<!--Related Posts with thumbnails Scripts and Styles Start-->

y

<!--Related Posts with thumbnails Scripts and Styles End-->

El título lo personalizamos en related-posts h2
Con "font-size: 1.6em;" variamos el tamaño de fuente.
font-weight: bold; es la fuente en negrita.
color: black; es el color de fuente.
El estilo de fuente lo veremos en  font-family: Georgia, “Times New Roman”, Times, serif; 
Para eliminar el título lo podemos hacer añadiendo: visibility:hidden;
Si deseamos añadir una imagen de fondo lo haremos añadiendo:
background: url('aquí url de la imagen') repeat;

El breve resumen de texto que se muestra al pie de las miniaturas lo podemos modificar en related-posts a
Al final veremos dos veces related-posts a:hover el primero, donde dice color:black; será el color de fuente del breve resumen al pasar el cursor (efecto hover)
El segundo, en background-color:#d4eaf2; es el color de fondo al pasar el cursor.

Si decidimos dejarlo tal y como viene resulta muy sencillo de aplicar, al personalizarlo resulta molesto porque los cambios no se ven en vista previa, pero vale la pena probarlo aunque sea por darnos el capricho de ver el efecto.

No se olviden de guardar copia de la plantilla antes de realizar cambios.