Cómo añadir un widget de posts relacionados a Blogger

Por rcanessa

En este artículo vamos a hablar de un interesante truco para mostrar posts relacionados junto con imágenes en miniatura debajo de cada artículo en los blogs construidos en Blogger.com. Los artículos relacionados son seleccionados de otros posts que están en la misma categoría/label/tag. Gracias a este widget los visitantes del blog permanecerán por más tiempo en el sitio cuando vean los artículos relacionados, y en el caso de los blogs monetizados se incrementarán los ingresos.

Pasos para añadir el widget de posts relacionados a Blogger

Paso 1: Ingresar a la cuenta de Blogger y dirigirse a Plantilla>Editar HTML

Paso 2: Hacer clic en cualquier parte dentro del área de código y apretar las teclas Ctrl + F.

Paso 3: Buscar la siguiente pieza de código añadiéndola en el cuadro de búsqueda (Apretar Enter para realizar la búsqueda).

 </head>

Paso 4: Copiar y pegar el código mostrado a continuación justo arriba/abajo de la etiqueta </head>.

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

<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;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=’https://helplogger.googlecode.com/svn/trunk/relatedposts.js’ />

</b:if>

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

Notas: 

• Para cambiar la altura y ancho de las imágenes en miniatura, modifique los valores 110px y 100px en rojo.
• Para cambiar el color y tamaño de los títulos de cada post relacionado, cambie el valor en azul.
• Remueva la línea de color violeta si quiere que los posts relacionados aparezcan tanto en la página de inicio con en las páginas de posts.

Paso 5: Encuentre la siguiente línea (aparece dos veces, pero la que nos interesa es la que aparece por segunda vez):

 <div class=’post-footer’>

Paso 6: Justo encima de  <div class=’post-footer’> pegue el siguiente 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>

<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>Related Posts:</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://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html” rel=”nofollow” >Related Posts Widget</a></div>

</b:if>

<!– Related Posts with Thumbnails Code End–>

Notas:

•  Si quiere que los posts relacionados también salgan en la página de inicio remueva las líneas en violeta.
• Cambiar el valor 5 en max-results=5 de tal forma que el widget muestre la cantidad de posts relacionados deseados.

Si no son capaces de ver los posts relacionados después de salvar la plantilla, añadan el código mostrado en el paso 5 justo encima de la etiqueta <b/:includable>, la cual puede ser encontrada arriba de esta línea (usar Ctrl + F para encontrarla):

 <b:includable id=’postQuickEdit’ var=’post’>

Para obtener más información, hagan clic en la siguiente imagen:

Paso 7: Salvar la plantilla y listo. A partir de ahora aparecerán entradas relacionadas debajo de cada artículo que tenga etiquetas.

---

Contenido relacionado

• ¿Como crear un widget con enlaces Nofollow en Blogger?
• ¿Cómo añadir widgets extra en el header de Blogger?
• ¿Como dividir el sidebar de Blogger en dos partes?
• ¿Como añadir el widget de calendario de archivos en Blogger?
• ¿Cómo personalizar la nube de etiquetas en Blogger?
• ¿Como ajustar los títulos de Blogger para mejorar el SEO?

https://internetrcc.com/2015/08/como-incluir-widget-posts-relacionados-blogger/