Script de Post Relacionados en Blogger con imagen miniatura sin LinkWithin

Este script sirve para poner post relacionados con una imagen miniatura. Antes ya habia hablado de un widget llamado LinkWithin pero lo malo de ese widget es que no era nada personalizable y nos limitabamos a sus opciones por un momento me gusto pero muy limitado :-(

asi se veran tus post relacionados:

Aqui puedes ver una web que los utiliza

Ahora les muestro esta otra opcion para poner post relacionados con miniatura, es mucho mejor ya que lo podemos personalizar a nuesta manera, podemos poner cuantos post queremos que salgan y personalizar hasta los colores, bueno aqui estan los pasos:

1. Lo primero que tienes que hacer es buscar(CTRL+F para buscar codigos) este codigo

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

Si no lo encuetras es porque tu plantilla esta distinta, puedes encontrarlo tambien como esta linea

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

Bueno yo lo que recomiendo es que mejor busques solo el termino post-footer-line-1 asi no tendras problemas ;-)

2. Luego despues de esa linea debes pegar abajo el script

<!-- 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=&quot;Articulos relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Puedes configurar cuantos post quieres que se muestren cambiando el valor de var maxresults=5; por defecto se muestran 5, pero puedes poner los que quieras solo cambiando el numero

Puedes cambiar el titulo, por defecto dice Articulos relacionados cambia el titulo por el que tu quieras

3. El siguiente paso es añadir el estilo CSS, debes buscar el codigo

]]></b:skin>

y arriba de el pegar este codigo

/* related posts
-----------------------------------------------*/
#related-posts {
width:420px;
margin:0 auto;
text-align:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 15px;
font-weight: bolder;
color: #525252;
font-family: Georgia, “Times New Roman”, Times, serif;
margin: 0;
padding: 10px 0 10px 0;
}

#related-posts a{
background: #F4F8FD;
border: 1px solid #E5F0FB;
color:black;
}

#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color: #81BEF7;
}

Para cambiar los colores:

en esta parte del estilo CSS

#related-posts a{
background: #F4F8FD; este es el color del fondo del cuadrito con la imagen
border: 1px solid #E5F0FB; este es el codigo del color del borde
color:black;
}

#related-posts a:hover {
background-color: #81BEF7; este es el color del cuadrito con la imagen cuando esta el mouse encima
}

Para ayudarte, aqui puedes ver todos los codigos de los colores hexadecimales

4. Bueno ahora solo falta que guardes tu plantilla y listo!!!