Entradas relacionadas con imagen en Blogger

Entradas Relacionadas con miniaturas o Related Posts with thumbnails en el blog es muy útil y se hace mediante las etiquetas que tenga tu blog, por lo que se mostrarán los post relacionados que están bajo la misma etiqueta.

Con de los Related Posts al final de las entradas de Blogger se aumenta las visitas del blog, ya que es muy probable que el navegante haga clic en esta y el blog ganara mas vistas el trafico.

Entradas Relacionadas con miniaturas o Related Posts with thumbnails mejora los enlaces internos del sitio.

Las Entradas Relacionadas son una de las estrategia interna de enlace SEO como también lo son las Etiquetas o Categorías, el Archivo y breadcrumbs, entre otras.

Como Entradas Relacionadas/Related Posts no está disponible en el panel de administración de Blogger, en este momento, tenemos que añadir un fragmento de código en la plantilla del blog, para esto sólo hay que seguir las instrucciones.

1. Ir a Plantilla → Hacer Copia de seguridad de la plantilla
2. Ir a ► Edición de HTML ► presionamos CTRL+F en el buscador pegamos </head> y arriba de este pegamos el siguiente código:

<!--Entrada relacionada con imagen en miniatura Scripts y Estilo CSS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {width:600px;float:left;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:20px;}
#related-posts h2{ text-align:center;font-size: 1.6em;font-weight: bold;color:#000;font-family: 'Open Sans', sans-serif;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{width:80px;height:180px;color:#000;}
#related-posts a:hover{color:#000;}
#related-posts a:hover {background-color:#a991af;}
#related-posts img {padding:4px;padding-top:7px;}
</style>
<script type='text/javascript'>
var defaultnoimage='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pK0XIrSEesngKZWJVif3oSpdIRahhN2r45cYRF1WCrN1yiOldIZK8fN9Q40bWbyYIcx5zB7cfaOHYHFYQFbIIfpRyROHauJQEEFFmSkdzzyAEE8wDASuq4id38g-fN8dIKylnXfFBxw/w72-h72-p/cosasparaelblog.png';
var maxresults=6;
var splittercolor='#ebb499';
var relatedpoststitle='Entradas Relacionadas';
</script>
<script src='https://sites.google.com/site/cosaspablog/home/related-posts.js' type='text/javascript'/>
</b:if>
<!-- Fin Entrada relacionada con imagen en miniatura Scripts y Estilo CSS-->

3. Después busca la siguiente linea:

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

Aparecerá dos veces nosotros trabajaremos con la segunda.

4. Y debajo ello agrega el siguiente bloque:


<!-- Código Entrada relacionada con imagen en miniatura -->
<div id='related-posts'>
<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=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<!-- Fin código Entrada relacionada con imagen en miniatura -->

Para personalizarlo

Se pueden cambiar los siguientes valores antes de GUARDAR LA PLANTILLA


var defaultnoimage= ► Url de la imagen por defecto cuando la entrada no contiene. El tamaño de la imagen es 72 x 72 pixeles.
var maxresults= ► Cantidad de Entradas relacionadas que están bajo la misma etiqueta.
var splittercolor= ► Color del borde entre las imágenes
var relatedpoststitle= ► Titulo de las Entradas relacionadas que se desea mostrar.
color: → Se puede cambiar el color.
background: → Se puede cambiar el color.
font-family: → Se puede cambiar la fuente.