Añadir articulos relacionados con imagenes miniaturas a tus entradas

Por /
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

Te recomendamos:

El Fanbox de Facebook, flotante y con efecto deslizanteagosto 22, 2011
Padre le cierra el blog porque se estaba haciendo popularmayo 5, 2011
Chat similar de Facebook en tu blogabril 16, 2012
Poner Borde a las Imágenes de nuestros Post en Bloggeragosto 10, 2010
Averigua si la página web que vas a visitar está infectada por virus o malwarejunio 17, 2010
FreeBlogApps: crea crea una aplicación de tu blog para Android de forma gratuita y fácilfebrero 21, 2012

Entradas relacionadas

14 comentarios en “Añadir articulos relacionados con imagenes miniaturas a tus entradas”

  1. adriancybor

    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.

  2. Blogroll

    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

  3. Unknown

    @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

  5. Blogroll

    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

  10. adriancybor

    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.

Los comentarios están cerrados.

Scroll al inicio