Añadir articulos relacionados con imagenes miniaturas a tus entradas

En el articulo  Añadir articulos relacionados a tus entradas Blogger ya vimos como añadir articulos relacionadas en forma de lista y ordenados por categorias utilizando un codigo html. Este codigo fue mejorado incluyendo imagenes en miniatura, resultando mas atractivo para el visitante; eso es lo que se pretende, quedando asi.
Otra ventaja de este widget; aparte de mostrar las imagenes en miniatura,es aque nos muestra una imagen si el articulo o la entrada no tiene ninguna. Este widget fue desarrollado por bloggerplugins.


  • Para integrarlo en nuestro blog blog accedemos a Diseño>Edicion HTML> Expandimos lo artilugios, pulsa F3 para ejecutar el buscador del navegador; buscamos </head>  y justo antes pegamos el siguiente codigo, que te dejo en la siguiente pagina.

  • Ahora Buscamos la siguiente linea en el codigo html de nuestro blog:
                  <div class='post-footer-line post-footer-line-1'>
  • Sino la encuentra busca la siguiente:
                 <p class='post-footer-line post-footer-line-1'>
  • Pegamos el siguiente codigo justo despues:
<!-- Articulos relacionados con miniaturas -->

<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Artículos relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

<!-- Articulos relacionados con miniaturas -->
  • Ahora tenemos poner el numero de articulos relacionados a mostrar, lo podemos cambiar en var maxresults=6; .
  • Para terminar tenemos que configurar la distancia entre las imagen en miniaturas, buscamos:
                           ('<a style="text-decoration:none;padding:5px;float:left;');
  • Cambiamos 5px por la cantidad de pixeles deseada.
Como veis es muy facil de implementar; y muy atractivo para el visitante.

Lo tienes implementado? Cuentanos tu experiencia

Comentarios

  1. Hola amigo!!! Muy buen articulo, solo tengo 2 problema aplicarlo:

    1-Mi blog tiene un fondo negro, como hago para cambiarle el color de los textos en miniatura???

    2-aparece todo bien salvo que el titulo de comentarios queda desordenado, junto con todo el texto de ese sector, como puedo resolverlo???
    desde ya muchas gracias.

    ResponderEliminar
  2. Hola y muchas gracias por este widget pero mi pregunta es si se puede modificar para mostrar domas las imagenes? como articulos relacionados solo con imagenes?
    Gracias y Saludos

    ResponderEliminar
  3. Hola y muchas gracias por este widget pero mi pregunta es si se puede modificar para mostrar domas las imagenes? como articulos relacionados solo con imagenes?
    Gracias y Saludos

    ResponderEliminar
  4. @Vagostube

    Hola amigo, para mostrar mas de una imagen lo que puedes hacer es sustituir la imagen principal con GIF donde se vean todas las imagenes que quieres mostrar, Espero que le sirva

    ResponderEliminar
  5. Gracias lo intare y te comento como me fue x)

    ResponderEliminar
  6. ya lo pude cambiar.... necesito saber porque no me dega incrementar el numero de posts para mostrar

    Gracias! :D

    ResponderEliminar
  7. @Padre De Familia Español Latino

    el numero de los posts relacionados, es proporcional al ancho de blog, si le das mas ancho podras poner mas. Saludos

    ResponderEliminar
  8. ya lo pude cambiar.... necesito saber porque no me dega incrementar el numero de posts para mostrar

    Gracias! :D

    ResponderEliminar
  9. Gracias lo intare y te comento como me fue x)

    ResponderEliminar
  10. Hola amigo!!! Muy buen articulo, solo tengo 2 problema aplicarlo:

    1-Mi blog tiene un fondo negro, como hago para cambiarle el color de los textos en miniatura???

    2-aparece todo bien salvo que el titulo de comentarios queda desordenado, junto con todo el texto de ese sector, como puedo resolverlo???
    desde ya muchas gracias.

    ResponderEliminar
  11. muy buno si funciono perfectamente... Gracias... xD

    ResponderEliminar
  12. Me alegro, mucho :)

    ResponderEliminar
  13. no, la verdad que te pasaste con est, ahora mi blog es mas dinamico...muchisimas gracias!!!! te dejo el link para que veas como quedo!!

    http://tumundoinsolito.blogspot.com/

    ResponderEliminar
  14. ah algo que te queria pedir pasate por mi blog y dime en que debo mejorar si no es mucha molestia http://ifullinfo.blogspot.com/

    ResponderEliminar
    Respuestas
    1. me gusta el diseño bastante limpio, la pagina tarda muy poquito en cargar, solo le falta mas contenido, un saludo

      Eliminar
    2. gracias por tu opinión, Saludos...!!

      Eliminar
    3. oye amigo le hice unos arreglos a los artículos relacionados si puedes míralos y si te agrada te puedo pasar el código para que lo implementes si te parece

      Eliminar

Publicar un comentario

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Entradas populares de este blog

5 alternativas open source a Loquendo

Que es microsoft silverlight