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

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

En este artículo vamos a hablar de un interesante truco para mostrar entradas relacionadas 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 entradas relacionadas en Blogger

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

Vamos a "Plantilla"

Abre "Editar HTLM"

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Busca este codigo </head>

Una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

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

<b:if cond=’data:blog.pageType == "item"’>

<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=’http://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 == "item"’>

<div id=’related-posts’>

<b:loop values=’data:post.labels’ var=’label’>

<b:if cond=’data:label.isLast != "true"’>

</b:if>

<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"’ type=’text/javascript’/></b:loop>

<script type=’text/javascript’>

var currentposturl="<data:post.url/>";

var maxresults=5;

var relatedpoststitle="<b>Related Posts:</b>";

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 las entradas relacionadas 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 entradas relacionados deseados.
Si no son capaces de ver los entradas relacionados después de salvar la plantilla, añadan el código este código:

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

Justo encima de la etiqueta <b/:includable>, la cual puede ser encontrada arriba de esta línea (usar Ctrl + F para encontrarla):

Fuente: internetrcc.com

Fecha:25/02/2017

Publicado por: