9/05/2012

Widget de Entradas Relacionadas para Blogger

Hasta ahora muchos usan el gadget de Linkwithin, pero este presenta la limitación de solo mostrar hasta 5 entradas y depender de una plataforma externa. Aquí les traemos el mismo truco maravilloso para la visualización de los post o entradas relacionadas debajo de cada una de las entradas de su blog, junto con miniaturas, pero totalmente independiente. Los artículos relacionados son elegidos entre otros de la misma categoría / etiqueta. Con este hack muchos de sus lectores se mantendrá en su sitio durante largos períodos de tiempo en los que ven los mensajes de interés relacionados.

Pasos para Añadir el widget de Mensajes Relacionados a Blogger / Blogspot

Paso 1. Ir a Panel de control >> Diseño Blogger HTML >> Editar;

Paso 2. Marque la casilla "Expandir plantilla de artilugios" ;

Paso 3. Buscar con (Ctrl + F) este trozo de código:


</head>

Paso 4. Copia y pega el siguiente código justo antes de / por encima de
 </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{

font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {

background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://4.bp.blogspot.com/-sCQy7v-L2bo/T3OYPnm7LuI/AAAAAAAABl4/cbteumcrZSU/s1600/noimage.png";
var maxresults=5
;
var splittercolor="#d4eaf2";
var relatedpoststitle="You might also like these posts";
</script>
<script src='https://dl.dropbox.com/u/14895124/Javascript/related-posts-with-thumbnails-for-blogger%5B1%5D.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


Nota:
para cambiar la imagen predeterminada cuando no hay imágenes disponibles, sustituir el URL en azul con otra de su elección.
-para la visualización de más de 5 mensajes, cambie el valor de "5 maxResults var = 5;"
-eliminar el código de color violeta si desea que los mensajes relacionados que se mostrará en la página principal también


Paso 5. Ahora busca el siguiente código:


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

Si no lo encuentra, a continuación, busque la siguiente:

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

O:

<data:post.body/>

Paso 6. Copia y pega el siguiente código justo después de cualquiera de estas líneas

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Nota: - cambiar el valor 6 de max-results = 6 con el número de mensajes que desea que se muestren.
- Si desea que los mensajes relacionados que se mostrará en la página principal también, eliminar el código de color violeta.

Paso 7. Guarde la plantilla





Visto en http://helplogger.blogspot.com.ar/2012/03/how-to-add-related-posts-widget-to.html

50 comentarios:

  1. Muchas gracias. Funciona perfectamente.
    ¿Habría posibilidad de cambiar el tamaño de las miniaturas?
    Saludos

    ResponderEliminar
  2. Supongo (porque no recuerdo lo que había probado oportunamente) que cambiando las líneas height:100%;
    min-height:100%; por valores en pixels tales como 100px, debería cambiar. Para que quede prolijo deberás cambiar también la cantidad de resultados.
    Saludos

    ResponderEliminar
  3. Hola, ese código funciona al entrar a la página principal, o solo se ven las miniaturas cuando hacemos click en una entrada?
    Yo tengo ese, pero estoy buscando uno donde al entrar al blog se muestre las entradas relacionadas... ¿sabes?

    ResponderEliminar
    Respuestas
    1. Luis, eso depende de si tienes una plantilla normal o de estilo magazine que son las que vienen con resumen de post con miniatura de imagen (las que dicen "leer más"). El gadget aparece en la ubicación donde lo coloques. En el ejemplo se pone en el pie del post 'post-footer-line post-footer-line-1', esto quiere decir que si tu blog muestra todo el post en la primer página lo verás de entrada y si es estilo magazine deberás entrar en el post para verlos.
      Hay varios trucos para mostrar u ocultar los gadgets a voluntad, pero aquí se trata de que lo verás según donde alojes la modificación encerrada entre Related Posts with Thumbnails Code Start y Related Posts with Thumbnails Code End

      Eliminar
  4. Disculpa, hay alguna forma para que se muestren mas caracteres,lo que pasas es que uso títulos largos y no me sirve.

    ResponderEliminar
    Respuestas
    1. No es un diseño mío así que estoy tan acotado como usted para darle una respuesta. Otras aplicaciones similares ( como la que usa mi plantilla en este momento) no tienen limitaciones. Tal vez se deba a que depende de la separación y tamaño de los campos. Espero que encuentre su solución.

      Eliminar
  5. Gracias amigo, me ha servido a la perfeccion, ademas es algo simple, Aunque debo decir que en paso 5 no encontraba la linea que tenia que buscar pero busque el post-footer y despues de un > ubique el codigo y ha funcionado. Saludos. Muy buen blog.

    ResponderEliminar
    Respuestas
    1. Excelente trabajo. Espero que la disfrute con alegría.;)

      Eliminar
  6. Excelente, muchas gracias.
    Tengu una duda he observado que ne muchas ocasiones, entre los post relacionados que se muestan, también se muestra el mismo post en cuestión que estoy viendo, lo cual me fastidia un poco, evidentemente "este" post está relacionado consigo mismo, claro, pero este ya lo estoy viendo. ¿Sabes porqué puede ser o cómo evitarlo?

    ResponderEliminar
    Respuestas
    1. Seldon, tiene toda la razón del mundo. Como supondrá, todo puede llegar a hacerse mediante código, pero dentro del que existe en forma gratuita, éste no considera el bloqueo del post donde aparece el relacionado. Creo incluso que en Linkwithin aparece de tanto en tanto el mismo post como recomendado. Es que casi todos toman la información del RSS publicado y no hace un análisis de donde se encuentra o lo va a mostrar(cosa que no sería difícil de hacer).
      Por lo tanto la respuesta a su pregunta es , no, no sé cómo evitarlo.

      Un abrazo

      Eliminar
  7. Gracias OPin, yo tampoco tenía nivel técnico como para modificar el código y evitarlo, aunque curioseando un poco si que veo que elimina duplicados (para que no salga dos veces el mismo post). Así que si alguien sabe programar lo suficiente y se anima a decirnos cómo se cambia.... :-)

    ResponderEliminar
    Respuestas
    1. Eso, eso, que aparezca alguien que sepa :)

      Eliminar
  8. gracias, me a quedado perfecto.

    ResponderEliminar
  9. Hola y muchas gracias, pero lamentablemente a mi no me ha funcionado, aunque lo he intentado de mil maneras.

    ResponderEliminar
    Respuestas
    1. Cada plantilla es un mundo y a veces no funcionan como uno quisiera.
      Prueba la manera 1001 y ubica el código bajo
      class='post-footer-line post-footer-line-2'
      o
      class='post-footer-line post-footer-line-3'
      o incluso antes del area de comentarios.

      Si eso no funciona puedes usar Linkwithin, o que alguien que sepa más te analice la plantilla.

      Cariños.

      Eliminar
  10. Hola: Muchas gracias por tus tutoriales, son muy prácticos.
    Me atrevo a abusar de tu bondad para hacerte una consulta: después de mucho buscar, por fin he añadido una descripción en la cabecera de mi blog, pero no puedo cambiar el tamaño ni el formato de la fuente. Quisiera poner parte de la descripción en cursiva, pero no encuentro la forma. En el diseñador de plantillas solo está la opción de cambiar el color de la fuente.
    Perdona por el morro y gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Por lo que he visto en tu blog has incluido una etiqueta description con datos encerrados entre etiquetas "span"
      <p class="description"><span>"Verdaderamente grandes son las cosas que propongo en este breve tratado a la visión y a la contemplación de los estudiosos de la naturaleza.(...)"
      (Avviso Astronomico, Sidereus Nuncius. Galileo)</span></p>

      la forma más sencilla de continuar con tu intento es la siguiente:

      En una entrada vacía escribe tu texto, ponle la fuente que quieras en itálica o no, luego copia el código que resulta pero del área HTML de tu entrada. Verás que se encuentra entre spans. Por ejemplo

      <span style="font-family: &quot;Helvetica Neue&quot;,Arial,Helvetica,sans-serif;"><i>"Verdaderamente grandes son las cosas que propongo en este breve tratado a la visión y a la contemplación de los estudiosos de la naturaleza.(...)"<br />(Avviso Astronomico, Sidereus Nuncius.&nbsp; Galileo)</i></span>

      Creo que es la forma más sencilla.

      Si quieres otro tipo de letra utiliza nuestra entrada http://generacionopin.blogspot.com.ar/2012/09/cambiar-el-tipo-de-letra-en-blogger.html

      y pon el nombre de la familia de fonts de tu elección antes de donde dice Helvetica.

      Debería funcionar.

      Eliminar
    2. Muchísimas gracias por tu eficacio y rapidez.
      Pero vas a alucinar con mi falta de pericia: una vez copiado el código, ¿dónde accedo al código HTML general del blog para pegarlo y en qué parte del código lo pego? Porque lo intenté yendo a "plantilla" y pulsando el botón de "editar HTML" y como ahí no pude encontrar ninguna etiqueta que tuviera mi texto, me decidí a consultarte.
      Lo que encontré fue, al principio del código, lo que yo supongo que se refiere a la descripción, porque pone "group description (igual) Blog Description", etc.
      pero el trozo de código que has pegado tú en tu respuesta,
      el que va entre etiquetas span, este no soy capaz de encontrarlo.
      De verdad que te lo agradezco.

      Eliminar
    3. Si expandes tu plantilla HTML mediante el botón superior etiquetado como "Expandir plantillas de artilugios" y buscas tu texto mediante ctrl + F seguramente encontrarás lo que has agregado y podrás cambiarlo pegando el nuevo sobre el anterior.

      No olvides hacer un resguardo antes de cualquier modificación.


      Suerte.

      Eliminar
  11. Hola, OPin: Muchas gracias por tu paciencia. Finalmente logré cambiar el formato, a base de dar la lata a muchos blogueros.
    La solución era tan simple como poner la etiqueta ... en la propia casilla de descripción. No te deja copiar todo en HTML, pero sí poner algunas etiquetas en sitios precisos.

    Saludos y enhorabuena por tu labor.

    ResponderEliminar
    Respuestas
    1. Lamento no haberte sido útil pero me alegra que lo hayas logrado solucionar, aunque ignoro de cual casilla de descripción me hablas. Nadie mejor que quién puede acceder al contenido de la plantilla para encontrar su problema, no hay duda. Desde fuera solo podemos adivinar mirando lo que el sistema permite visualizar.

      Gracias por pasar y que disfrutes tu blog con alegría.

      Eliminar
  12. Hola Opin, queria preguntarte si no tienes un tuto para montar los post relacionados como lo utilizas en esta plantilla, me gusta mucho mas.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Johnver si te fijas al pie de página esta plantilla no me pertenece, pero he utilizado este formato de post relacionados en otros blogs sin problemas.
      No, no creo que haga un tuto sobre ésto, pero puedes bajar esta platilla en http://www.soratemplates.com/2012/07/inspiration-blogger-template.html , instalarla en un blog de pruebas y copiar el CCS y los Scripts para integrarlo en tu plantilla.
      El cambio más importante es el CCS asociado a Related Post.

      Suerte.

      Eliminar
  13. Hola, cuando el título de la entrada es largo salen cortadas las palabras ¿hay forma de corregirlo?

    ResponderEliminar
    Respuestas
    1. No se trata de una falla ya que el mismo LinkWithin hace exactamente lo mismo. Se trata de ajustarse a un espacio predefinido en el CCS y que al tener un tamaño fijo de imagen debe sacrificar el texto.
      Una forma de minimizarlo es darle más espacio a cada entrada, por ejemplo usando tres o cuatro de ellas en el ancho de la plantilla, o como en ésta que estoy usando, hacer que el ancho de cada ítem permita títulos largos y puedan expandirse en varias filas.

      Pero ya sería otra implementación.

      Eliminar
  14. Hola, este gadget yo lo tenía instalado con este tutorial, yo desaparecieron las entradas relacionadas, miré y todos los codigos seguian en su lugar, los elimine y volvi a aplicar y ya no se muestran mis entradas ralacionadas, sabes qué pudo haber sido? gracias! christiandpy.blogspot.com

    ResponderEliminar
    Respuestas
    1. Verifiqué que sigue funcionando en la página del autor original, así que lo más probable es que haya algún tipo de colisión con otra función que hayas instalado a posteriori. Fíjate qué has agregado antes de que desapareciera ésta función y probablemente encontrarás el problema.
      Los datos del autor se encuentran en el post.

      Suerte.

      Eliminar
  15. Gracias por contestar! Veré qué puedo hacer, saludos.

    ResponderEliminar
  16. Muy bueno, varios widgets como este han dejado de trabajar al cambiar el panel de diseño html de Blogger los últimos días, pero este funciona a la perfección. Lo que sí tengo es una duda: ¿Cómo puedo centrarlo?
    Lo muestro: http://cloudgar.blogspot.com.es/2013/04/minecraft-harder-better-faster-stronger.html
    Me gustaría que los seis saliesen centrados, pero he probado con varios códigos y no hay tu tía. Al final será algo tan simple que ni habré caído en ello. Muchísimas gracias por el aporte OPin.

    ResponderEliminar
    Respuestas
    1. Lo mejor en tu caso es jugar con los márgenes de manera de hacerlos más amplios y lograr ocupar todo el ancho. Si lo centras no quedará tan bien como si ocupas todo el ancho.
      En estos momentos no puedo hacer pruebas pero apenas pueda te dejaré más información.

      Eliminar
    2. Puedes modificar la separación agregando

      #related-posts a{
      color:black;
      margin:0px 20px 0px 0px;
      }

      o puedes compensar el centrado cambiando el padding-left:0px; por la mitad del espacio sobrante (esto centrará el widget por desplazamiento a la izquierda)

      Eliminar
  17. Muchas gracias por tu sugerencias, a mi me no me funciona tengo una plantilla minima de blogger y lo he intentado de mil maneras y no va. Además tampoco me va linkwithin, nada un desastre

    ResponderEliminar
    Respuestas
    1. Estimada Zara: Cuando utilizas este tipo de widgets, (sea ésta implementación o Linkwithin) el sistema utiliza información publicada en tu RSS, es decir, debes tener habilitada tu dirección en algún Feed.

      Te dejo una muy buena explicación del Potro (Ciudad Blogger) para que habilites tu feed y así puedas usar Linkwithin o lo que en este post te contamos.

      http://ciudadblogger.com/2011/05/crear-un-feed-en-feedburner-y.html

      Mucha suerte.

      Eliminar
  18. Está muy bien muchas gracias! Me ha dado dolor de cabeza porque hasta el
    div class='post-footer-line post-footer-line-3' no me funcionaba pero bueno, arreglado =)

    ResponderEliminar
  19. Felicitaciones ! (o)

    ResponderEliminar
  20. Una pregunta! ¿Sabrías cómo hacer que quedara centrado? Ya sería el toque final!
    Un beso!

    ResponderEliminar
    Respuestas
    1. Por ahora la mejor respuesta que tengo es la que le he dado más arriba a Boba Fett. Compensar los márgenes o la separación.

      Saludos.

      Eliminar
  21. Hay alguna forma de aumentar el tamaño de la imagen en miniatura? probe cambiando el height:100%;min-height:100%; por valores en pixels como aparece en el primer comentario, pero sigue sin funcionar...

    ResponderEliminar
    Respuestas
    1. Tiene usted toda la razón. Luego de aquella respuesta trabajé un poco el tema y resulta que la definición está dentro del archivo JAVA. Habría que editarlo y modificar la línea

      <img style="width:72px;height:72px;border:0px;

      por los valores que uno pretenda. Salvarlo y volver a subirlo a un host, para finalmente cambiar la url en la plantilla.

      Otra opción, que no he probado pero supongo que funcionará es cambiar los valores 100% por otros tales como 150% y ver que pasa.

      Como no tengo tiempo de probarlo le agradecería que nos cuente a todos como le resultó.

      Un abrazo.

      Eliminar
  22. Gracias, muy bueno!! Tras un rato toqueteando, he conseguido dejarlo a mi gusto, he podido cambiar el tamaño de las imagenes y la longitud de los titulos modificando el archivo .js sin problema.

    Lo unico que no me ha convencido es que, creo, que salen los últimos post de esas etiquetas siempre, es decir si pones que salgan 5 recomendaciones y estas en una entrada cuya etiqueta es "Pepito", te salen los últimos 5 post que hayas puesto de "pepito", cuando en mi caso al menos seria mejor que saliesen 5 entradas aleatorias de esa/esas etiquetas, no siempre las mas recientes.

    ResponderEliminar
    Respuestas
    1. PornoD3. Debo confesar que no lo he notado, quizás porque no uso este widget en particular. Usualmente utilizo el que está instalado en esta página y que varía cada vez que ingresas en el post. Es posible que en una nueva entrada lo publique, pero como todas las cosas tiene una contra: ralentiza la carga del blog.

      Pero si en tu post este widget muestra cinco entradas y luego de presionar F5 vuelven a aparecer las mismas, estoy seguro que no durará mucho en tu página.

      Saludos.

      Eliminar
  23. Hola,gran tutorial pero no me funciona trato de piner todo los codigos bien pero nada lo e intentado de mil marenas pero se me resiste.ne cesito que me ayudas,tengo una plantilla de autor o terceros soratemples
    este es mi blog http://fujoshinoyaoi.blogspot.com.es/ te agradeceria la ayuda
    saludos

    ResponderEliminar
    Respuestas
    1. Estimado amigo. Lamentablemente no me será posible darle la ayuda que necesita. La plantilla Project 10 siempre me ha dado problemas para cargarla y hoy no ha sido la excepción. De tal manera me es imposible hacer pruebas pues me bloquea la máquina. Sora Templates cuenta con muy hermosas plantillas pero lamentablemente su autor ofusca el código para que nadie pueda cambiar los créditos. En esa protección incluye mucho del código de funcionamiento de los widgets, razón por la cual puede haber alguna parte del código que bloquea nuestros Related Post y no podremos solucionarlo porque se encuentra ofuscado.

      http://es.wikipedia.org/wiki/Ofuscaci%C3%B3n

      Será en otra oportunidad.

      Saludos.

      Eliminar
  24. Hola:

    Por más que incluyo el código no consigo que funcione. No me hace nada, es decir, no muestra el gadget de entradas relacionadas.

    Un saludo

    ResponderEliminar
  25. Hola Opin, quería preguntarte, por favor, cómo eliminaste las entradas relacionadas de la página principal de este blog y las conservaste en las entradas. Gracias, un saludo

    ResponderEliminar
    Respuestas
    1. David. Las entradas relacionadas no deberían aparecer en la página principal y si dentro del post. Pero algunas plantillas se conportan de forma diferente.
      Para solucionarlo deberás ocultar el elemento siguiendo estas indicaciones de Ciudad Blogger.

      http://www.ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Saludos.

      Eliminar
  26. Es que lo que me resulta extraño es que yo también tengo esta plantilla y a mí sí que me aparecen en la página principal, entre el pequeño resumen de las dos entradas que tengo publicadas a modo de prueba. Como le he estado haciendo muchas modificaciones puede que sea debido a que he tocado algo del código. Leeré el link que me indicas, muchas gracias O Pin por tu respuesta tan rápida.

    ResponderEliminar
  27. Funcionó perfectamente, muchas gracias nuevamente, un saludo.

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.