Entradas relacionadas con Miniaturas para Blogger

Un gadget muy útil para aumentar la cantidad de páginas vistas es añadir el gadget de entradas relacionadas con miniaturas (thumbnails) a Blogger ENTRADAS RELACIONADAS THUMBNAILS BLOGGER Añadir el gadget de entradas relacionadas con miniaturas a Blogger es muy sencillo y configurable, lo puedes hacer en dos simples pasos:

1)

En diseño >> Edición HTML selecciona la casilla "Expandir plantillas de artilugios" y pega el siguiente código justo antes de </head>



2)

Ahora búsca la siguiente línea: <div class='post-footer-line post-footer-line-1'> y pega justo debajo el siguiente código y guarda los cambios (si no está prueba con esta otra: <p class='post-footer-line post-footer-line-1'>):

<!-- 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> <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=5; var relatedpoststitle="Entradas relacionadas"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if> <!-- Related Posts with Thumbnails Code End-->


Para no recargar la portada del blog las entrdas relacionadas se ven sólo en las entradas individuales.

Notas:

* Si quieres cambiar el número de post relacionados busca la siguiente línea en el código: var maxresults=5 y remplaza 5 por el número de entradas que quieres mostrar.

* Puedes modificar en donde dice var relatedpoststitle="Entradas relacionadas";/ cambiando "Entradas relacionadas" por el texto que tu quieras.

* Tienes que tener etiquetas en tus entradas para que el gadget funcione.

* El código JavaScript que hace que el gadget funcione es el siguiente, si quieres respaldarlo o subirlo a tu host lo puedes descargar desde aquí.



Actualización:

25/7/11: Modificación del código para hacerlo compatible con más plantillas de Blogger. Si ya has probado el código y no te ha dado resultado te recomiento que lo intentes ahora con los nuevos cambios.

Comentarios

  1. Me encanto .Muchas gracias la verdad pense que no me irian a contestar pero veo que les di idea para un nuevo post.
    Saludos.

    ResponderEliminar
  2. me gustaria que siguieras mi blgo, saco muchas cosas de aqui y me gustaria qe lo siguieras HEHE
    http://seriesdedisneychannel.blogspot.com

    ResponderEliminar
  3. Hola, ante todo mis saludos y decirle que soy una fiel seguidora de este sitio. Desde hace mucho tiempo he querido colocar este gatget, hoy lo intenté pero me da un error, y lo deseo tanto. Un abrazo.

    ResponderEliminar
  4. Código actualizado, a los que lo han utilizado y no les ha funcionado prueben nuevamente con las nuevas modificaciones.

    ResponderEliminar
  5. ¡muy útil! GRACIAS POR TODAS LAS IDEAS.
    Saludos.

    ResponderEliminar
  6. hOLA!!!
    SOLO T KERIA PREGUNTAR UNA COSA:
    no tiene relacion cn esto:
    como poner la barra de menu, en el blog? ami no me funcciona... :( .
    Es esa ke tu tienes, esa ke dice, INICIO, INDICE, PUBLICIDAD, CONTACTO, COVERTIR HTML A TEXTO, PCZ. Necesito tu ayuda, porque estoy haciendo un blog de desings y no puedo. ahh!, y tambien otra cosa: como pones los codigos en una barra aparte, en ves de escribirla por texto???. RESPONDE PORRFA X(

    ResponderEliminar
  7. ola buen blog.
    te queria preguntar una cosa:
    podriamos hacer intercambio de enlaces??

    ResponderEliminar
  8. Llevo dos noches intentando poner esto en mi blog y no hay manera posible, cuando lo hago voy a vista previa para ver si guarda los cambios y me sale tosda la pantalla en blanco, sólo aparece en la lateral izquierdo las palabras "vista previa" lo demás en blanco y ya no sé que hacerrrrrr!!!! Me echas un cabre porfi????

    ResponderEliminar
  9. ola sabes no puedo colocarlo en mi blogger, aqui te dejo mi blogger
    http://tudescargapeli.blogspot.com

    por que me pasa esto

    ResponderEliminar
  10. pues a mi si me funciono! muchas gracias lo he implementado en Mi blog: http://www.el-indie.blogspot.com/ solo quisiera decir que chequen las entradas de forma individual pues no sale en el index regular

    ResponderEliminar
  11. A mi el primer dia que lo añadí me funcionaba perfectamente pero despues de unos días ya no me aparece! Y el código está tal cual.. ¿Sabéis que puede pasar? Mi blog es: http://fieltrezitos.blogspot.com

    ResponderEliminar
  12. Oye, una cosa, ¿cómo pongo en el javascript el texto en blanco? Por que con el primer código si he podido poner el texto en blanco, pero en el segundo texto no. Espero tu respuesta. Saludos. Por si alguien le quiere hechar un vistazo: http://landinote.blogspot.com

    ResponderEliminar
  13. Aaaaaaaaaaaaaaaaaaaaaaaaaa por finnn!!! muchas gracias!!!

    Mira! que tal me quedo jeje
    http://vainasbook.blogspot.com/

    Muchos exitos!

    ResponderEliminar
  14. Hola! no emtiendo muy bien donde tengo que poner ese codigo ya que entro en diseño pero no se donde esta el cógigo html y la parte de expandir plantillas de artilugios, me podrias ayudar? gracias.
    www.cuentamecris.blogspot.com
    cristinamc1492@hotmail.com

    ResponderEliminar
  15. Hola, te escribo para saber si puedo modificar el tamaño de las imágenes ya que en mi Blog las imágenes se ven feas con este Script.

    Te felicito por el Blog.

    El mio lo dejo para que veas las imagenes lo fea que quedan.

    http://dd-cybernauticos.blogspot.com/

    Saludos.

    ResponderEliminar
  16. hola...me gusta mucho tu blog y muchas cosas las he puesto en el mio,pero este truco no me funciona..me podrias ayudar?? he puesto los codigos como has dicho y nada....mi blog es el siguiente:http://r-creacionesfieltros.blogspot.com/

    gracias

    ResponderEliminar
  17. He intentado incluir en mi blog este gadjet, pero soy incapaz.
    Me puedes dar alguna indicación más?
    Mi blog es www.ruidodecacerolas.com
    Gracias

    ResponderEliminar
  18. A mi tampoco me funciono ni con este ni con el linkwithin no se si deba a que exporte las entradas de mi antiguo blog y las publique todas en un mismo dia espero puedas ayudarme
    te dejo el link de mi blog
    httt://vcs-movies.blogspot.com

    ResponderEliminar
  19. Hola,
    he puesto el código y no al parecer no funciona en mi blog:http://silenciopensamientoyvoz.blogspot.com/ (tampoco encuentro la "actualizacion" mencionada: 25/7/11.
    Podrías ayudarme?
    Anteriormente tenía linkwithin y me funcionaba perfecto, antes de cambiar el nombre del blog (con lo cual se modificó la URL)... cuando activo mi cuenta de linkwithin por el ID unico, me aparecen las imagenes, pero no enlazan a la dirección actual.

    Te agradezco y espero tu respuesta

    Alef

    ResponderEliminar
  20. Gracias mi amigo.. lo estaba buscando y en los otros sitios no funcionaba... sos el mejor!!!

    ResponderEliminar
  21. Hola, te quisiera preguntar como hacer para que NO considere una determinada etiqueta, por ej tengo una Etiqueta NOTICIAS y dentro de ella POLICIALES, ECONOMÍA,ETC. entonces que NO me considere la etiqueta NOTICIAS y busque las relacionadas dentro de las demas

    Muchas Gracias

    ResponderEliminar
  22. gracias lo voy a probar en mi blog haber que tal queda.

    ResponderEliminar
  23. A mi no me sirvio, hay alguna otra manera?

    ResponderEliminar
  24. ¿Y si quisiéramos que aparezca en las entradas de la portada (como hace Linkwithin?
    Muchas gracias

    ResponderEliminar
  25. esto esta muy bien ye s algo q me encantaria conseguir,pero me canse ,me dejo la vista ahi y no doy con la linea, nada...no puedo ponerselo,estaba muy dificil de averiguarlo,la verdad,pero igual gracias

    ResponderEliminar
  26. Muchas gracias. me funciono perfecto.

    http://marrafutbolero.blogspot.com/

    ResponderEliminar
  27. Tengo un problema, acaso cambio la edición de HTML porque me sale me dio raro con colores y eso...y no me sale class='post.... solo eso de div nada mas :(
    creo que cambiaron algo en blogger de nuevo ¬¬

    ResponderEliminar
  28. Muchas Gracias! Me funcionó de 10! y es muy útil. Hermosa página. Soy de http://www.micordobaargentina.com.ar/ Si te gusta esta Provincia de Argentina te invito a mi blog. Saludos! :D

    ResponderEliminar
  29. Muchas Gracias!! Funciona de 10! Soy de la Provincia de Córdoba Argentina por si queres visitar. http://www.micordobaargentina.com.ar/

    ResponderEliminar
  30. Funciona de 10! Muchas Gracias!!
    Soy de http://www.micordobaargentina.com.ar/

    ResponderEliminar
  31. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  32. Hola, a mi no me funciona, utilizo la plantilla simple de blogger, ¿me podrías ayudar =(?

    ResponderEliminar
  33. hola no cacho busque peor no me aparece la parte esposible que hicieras de repente fotos de pantalla mostrando

    ResponderEliminar
  34. HOLA NO ME FUNCIONA EN EL MIO MIRA VISITALO
    ESTOY TRATANDO DE PONERLO PERO NO ME FUNCIONA
    ESTE ES MI BLOG
    http://oscurosvampiros.blogspot.com/

    ResponderEliminar
  35. Hola, ya lo puse, pero no me sale nada, me podrias ayudar??
    Mi blog es:
    http://www.excentricazonaalterna.com/

    ResponderEliminar
  36. Hola,
    Yo he probado con varios relacionados y todos me daban algún problema o no aparecían.
    Si no os sale, probad a colocar el código en el SEGUNDO 'post-footer-line post-footer-line-1'>

    En mi caso, al principio lo coloqué en el primero y no me surtió efecto pero luego probé en el segundo y me ha quedado muy chulo. Tuve que cambiar los colores de las fuentes a blanco porque tengo el fondo de las entradas en color negro aunque eso es fácil. Donde pone #related-post h2 {
    font-size: 1.6em;
    font-weight: bold;
    color: black --------aquí ponéis el color que queráis en inglés (cambia el color de la fuente de "posts relacionados") Yo puse white (blanco)

    Para cambiar el color de la fuente que se ve resaltada al pasar el cursor (no el fondo, sino la letra), hacéis lo mismo: #related-posts a:hover {
    color: black ------------(el que queráis en inglés)

    Para cambiar el fondo resaltado cuando pasas el cursor (se ve en azul claro):
    #related-posts a:hover {
    backgrownd-color:#d4eaf2 ------cambiáis por el color que queráis [*Un truco: para probar los colores con su código correspondiente podéis ir a diseño-plantilla y pulsáis en "personalizar" (al lado de HTML). Dentro, vais a "Avanzado" y por ejemplo pulsáis en "texto de la página". A la derecha os aparece "color de texto". Pinchad en los cuadritos de colores. Así sabréis qué codigo de colores diferentes hay. Pero tened cuidado en dejarlo como estaba, si no, modificaréis el diseño de vuestra plantilla]

    Si queréis cambiar el color del título de las entradas que permanece mientras no paséis el cursor encima:
    #related-posts a{
    color: black -----------el color que queráis escrito en inglés

    Se pueden cambiar el tamaño y otros parámetros.

    Espero haber ayudado a alguien con mi mismo problema.
    Mi blog es: http://nuevoviajeaitaca.blogspot.com.es/

    Me encanta este blog. Ha sido todo un descubrimiento para mí.

    ResponderEliminar

Publicar un comentario

Antes que nada quisiera agradecete por la visita y por comentar en el blog!

También te quiero comentar que no tengo mucho tiempo para responder todos los comentarios inmediatamente pero siempre los contesto.

Saludos.

Nosotros somos pczeros... ¿Y tú?