Entradas relacionadas en miniatura blogger sin plugin 2015

No me habia querido meter con cosas de blogger, pero vale la pena compartir lo que creo que es importante y que le puede servir de utilidad a los demas
Al grano, quiero compartir los pasos de como poner una opcion que resulta muy importente para nuestro blo,g porque ayuda a que tengamos mas paginas vistas en él( los bloggeros de tiempo completo saben de que les hablo cuando digo paginas vistas)
Los articulos relacionados, post relacionados, también te puede interesar o como le quieras llamar, es algo que ha venido tomando mucha fuerza desde hace mucho tiempo. Hay paginas que permiten que uno ingrese el link del blog y nos dan un código que debemos ponerlo en un contenedor javascritp del blog,. como es el caso de LinkWithin. De esta debo decir que no me gustó la experiencia.
No voy a entrar en detalle, esperare a que lo usen y se enteren por su propio uso.

Vamos a poner una vista en miniatura de las entradas relacionadas en cada post sin usar ningun plugin ni pagina externa, selecciona las de acuerdo a la etiqueta que tenga.

Esta implementacion la explican muchos en muchas partes, pero a mi en particular es la que mejor me ha dado resultados.

Así se ven las entradas relacionadas

Paso a explicar como porner "Entradas o post relacionados"

Entra a tu blog
Vea plantilla/ edicion html
busca (control+F) la etiqueta  </head>    y encima de ella pegar el siguiente código

<!--estilo Posts relacionados inicio-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--estilo Posts relacionados fin-->
El ancho y alto de la imagen en miniatura ,lo pueden cambiar con los valores width:110px; height: 40px

Buscar <b:includable id='postQuickEdit' var='post'>
Arriba de esto que buscamos esta otra
<b:includable> y encima de ella pegamos el siguiente codigo
<!--Posts relacionados inicio-->
<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>
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Posts Relacionados:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="http://petersonmar.blogspot.com/2015/11/entradas-relacionados-en-miniatura.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!--Posts relacionados fin-->

Si queremos cambiar el titulo podemos reemplazar el titulo que esta en verde
El numero de post lo pueden cambiar en maxresults=5

Guardar los cambios y listo

Tambien te puede interesar: