Hosting en inglés

alojamiento web con Webhostinghub
Hosting SSD con Raiola

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

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.

Ejemplo de posts relacionados en Blogger

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

edición del código HTML de Blogger

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

Buscar contenido en plantilla Blogger

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=’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 == &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:

salvar-plantilla-Blogger

 

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


SUSCRÍBETE SIN COSTO ALGUNO A NUESTRO BOLETÍN

Escribe tú correo electrónico:

Recibe contenido de este sitio sin costo alguno en tu e-mail. Solamente enviaremos los últimos artículos de Internetrcc, sin ningún tipo de spam

Acelera tu sitio

Leave a Reply