Publicado enblogger html

Añadir articulos relacionados con imagenes miniaturas a tus entradas

14
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:

7 factores para aumentar el trafico de tu blogjulio 5, 2010
Sitemaps: un archivo, varios tipos de contenidojulio 15, 2010
Inconvenientes de tener tu blog en Bloggerjulio 17, 2010
Disqus en Bloggerjunio 14, 2011
Ventajas de tener tu blog en bloggerjulio 16, 2010
Qué son y cómo crear páginas estáticas en un Blogmarzo 20, 2014
Blogger: Nuevas opciones #SEOmayo 11, 2012
Como eliminar, quitar, o ocultar la Barra de Blogger Navbarmayo 17, 2010
Que tan rapida es tu pagina web?julio 23, 2010
Diez consejos para mejorar la visibilidad de tu sitio en las búsquedas de Googlejulio 13, 2010

14 comentarios

  1. adriancybor
    23/02/2011,

    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
    20/04/2011,

    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
    20/04/2011,

    @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
    25/04/2011,

    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
    04/08/2011,

    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.

  12. Ferd9
    31/10/2011,

    muy buno si funciono perfectamente… Gracias… xD

  13. Younes el azizi
    31/10/2011,

    Me alegro, mucho 🙂

Los comentarios están cerrados