Entradas Relacionadas con miniatura de imagen

En una entrada anterior vimos como colocar un gadget de "Entradas relacionadas" al pie de cada entrada usando LinkWithin, con este sistema de Blogger Widget conseguiremos un resultado casi idéntico tal y como veis en la imagen.

[1] En nuestro panel de Blogger vamos a Edición HTML y marcamos la opción de expandir las plantillas de artilugios.

[2] Localizamos la etiqueta </head> y justo encima colocamos este código:

<!--Entradas relacionadas con imagen-->
<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: 15px;
font-weight: bold;
color: #000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color: #000;
}
#related-posts a:hover{
color:#000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Entradas relacionadas con imagen-->

Fijaros que he resaltado en negrita la url del script que hace funcionar el gadget, ya que aunque en Blogger Widgets nos la proporcionan, lo mejor sería que cada uno usase su propio alojamiento para evitar problemas futuros...

Podéis ver como alojar un script en vuestro propio servidor si aún no sabéis como hacerlo.

En ese mismo código están incluidos los estilos CSS para el gadget, donde podemos por ejemplo cambiar el tamaño y color del texto de su título en #related-posts h2{

font-size: 15px; Cambiamos aqui el tamaño de fuente.
color: #000; El color de la fuente, negro en el ejemplo.


[3] Localizamos ahora esta línea de código en la plantilla:

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

Que en algunos casos podría verse así:

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

[4] Justo después de esa línea colocamos este código:

<!-- Entradas relacionadas codigo-->
<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="Entradas relacionadas";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Entradas relacionadas codigo-->

Esto hará que el gadget se muestre justo al final de la entrada, si queremos que se vea a continuación del contenido del post-footer deberíamos de pegarlo entonces después de esta línea o incluso algo más abajo:

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

[5] Escogemos en esta línea del código cuantas entradas se mostraran en el gadget:

var maxresults=5;

Si queremos ponerle al gadget un título distinto a "Entradas relacionadas" lo cambiaremos directamente en esta parte del código:

var relatedpoststitle="Entradas relacionadas";

Nota:

El gadget solo es visible en las páginas de entrada, es decir, cuando accedemos a una entrada y esta se muestra "abierta" con los comentarios debajo de ella.

Entrada original: Blogger Widgets / Ejemplo online: Eternamente cabreada