Transformar tu lista de blogs. Foto-blogroll | Oloblogger En esta entrada os mostraremos como funciona el gadget Lista de Blogs de Blogger , para que podais modificarlo y conseguir un blogroll ada...

22 de noviembre de 2008

Transformar tu lista de blogs. Foto-blogroll

En esta entrada os mostraremos como funciona el gadget Lista de Blogs de Blogger, para que podais modificarlo y conseguir un blogroll adaptado a vuestras necesidades y/o diseño.

Lo primero que hay que hacer es agregar el artilugio desde Elementos de página, seleccionando el orden, la cantidad de blogs y los detalles que se quieren mostrar:
  • Icono
  • Título del elemento más reciente
  • Fragmento del elemento más reciente
  • Miniatura del elemento más reciente
  • Fecha de la última actualización
Las modificaciones básicas de colores, fondos, tipo de letra, etc., son fáciles de realizar añadiendo nuevas clases antes de ]]></b:skin>. Habrá que usar los mismos nombres que Blogger le pone a los distintos elementos de los datos: contenedor, título, resumen, fecha actualización,...

Los nombres de dichos items así como la forma de redactarlos, ya se comentaron cuando la implementación del gadget. Si se colocan antes del <b:skin><![CDATA[/*, será necesario meter el código entre <style type='text/css'> y </style>, tal y como se indicó en su momento.

...

Pero puede que querais ir un poco más allá. En ese caso, en el siguiente enlace podreis ver el código completo comentado. Para modificar desde aquí, ya se requiere conocer algo de HTML, pero en el fondo sólo se trataría de cambiar el apartado que necesiteis, modificando o eliminando los bloques en que se configuran los datos de salida, o añadiendo etiquetas STYLE a las partes a formatear.

Por ejemplo, podemos conseguir una especie de foto-blogroll, borrando toda la parte de código que incluye los datos distintos de la miniatura. Si hacemos esto sin más, el problema será que las imágenes saldrán en vertical en fila de a una. A continuación teneis el código completo del gadget, para que salgan todas las imágenes seguidas, adaptándose al ancho del espacio disponible y con la información básica del post correspondiente al pasar el puntero por encima de cada imagen.

Hay que añadir el artilugio Lista de Blogs, seleccionar al menos la Miniatura y Guardar. Después se entra en Edición de HTML con artilugios expandidos. Todo el apartado Lista de Blogs desde <b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'> hasta </b:widget>, hay que sustituirlo entero por este otro.

El resultado si se deja en la sidebar, será algo parecido a la imagen de la derecha. Si quereis, también se puede trasladar a un bloque horizontal, por ejemplo encima o debajo de las entradas. Esto último lo podeis ver funcionando en Sin Entradas.

Este código incluye una condición para que muestre un dibujo estándar en el caso de que no exista imagen en el post. Es el ojo que se puede ver en el puesto 7 del ejemplo gráfico. También se ha incorporado un marco con el atributo BORDER que puede ser modificado al gusto.

El truco está basado en una idea de Miguelemele para su blog de fotografía, donde también lo podeis ver aplicado al final del blog. ¡Ah!... y el dibujito del ojo también es suyo.

Miguel también descubrió que las miniaturas son de un tamaño fijo de 72x72 px, por lo que si quereis mostrar otro tamaño, hay que escalar la imagen sustituyendo dentro de la etiqueta IMG, la expresión expr:height='data:item.itemThumbnail.height' por expr:height='NUMPIXELS' . Además, en la imagen para post sin idem, hay que cambiar el valor 72 por la misma cifra que coloquemos como NUMPIXELS.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

81 comentarios :

  1. me gusto lo de solo cuadritos!! voy a probarlo en mi blog! puedo usar el ojito? :D

    ResponderEliminar
  2. Hola, Oloman. Te estoy muy agradecido por las alusiones a mi blog y me gusta mucho el aspecto que le has dado a las miniaturas con ese borde tan bonito. Quería comentarte una pequeña incidencia con la que me he topado. Me ocurre que con los blogs en catalán o aquellos cuyas entradas o nombre de blog contienen un apóstrofe el tooltip se trunca.

    Lo que quiero decir es que si tendría que aparecer

    Laura Gelats • Bruc d'hivern • hace 12 horas

    aparece

    Laura Gelats • Bruc d\

    ¿Alguna sugerencia? Muchas gracias de nuevo.

    P.D.: Ayer estuve fisgoneando por aquí y he conseguido aprender cómo poner una imagen en el iframe del formulario de comentarios incrustado en página, que como mi blog tiene fondo negro no se me veía el texto "Comentar como:".

    ResponderEliminar
  3. Hola!!

    Una cosa, ¿como puedo agregar el blogrol en un post?

    Un saludo.

    ResponderEliminar
  4. Lo desconozco Juan, aunque tampoco le veo la utilidad ¿qué es lo que quieres hacer? Quizás haya otra alternativa.

    ResponderEliminar
  5. como puedo justificar el texto de la lista de blogs?
    un saludo y muchas gracias

    ResponderEliminar
  6. Hola Oloman, probe el sistema de cuadritos solamente y se me hacen inmensoooooooos,72x72 es muy grande, pero no se cómo achicarlos digamos a 32x32.
    Otra cosa, se me perdió el scroll y el fondo al poner el nuevo código! uff no se porqué ya que lleva el mismo ID.
    Cuando tengas un tiempito me das una mano?
    Un abrazo

    ResponderEliminar
  7. Hola Luz. Al final del post se explica como hacer más pequeñas las imágenes.

    Con respecto al fondo de tu blog, es posible que lo tengas alojado en algún sitio desde el que, temporalmente, no esté disponible. A mi me pasa de vez en cuando con Imageshack y con menos frecuencia, pero también, con el propio Blogger. Con lo del scroll, no sé a qué te refieres.

    De todas formas, viendo el código fuente de tu página, no veo ninguna imagen de fondo en la clase .post. No sé si es que colocas la imagen desde otra parte del código, pero lo normal sería que estuviera ahí. No recuerdo como lo tenias ultimamente, pero ahora se ve negro, sin más. Quizás te refieras al fondo del body, pero ese lo veo rojo... Concreta un poco más.

    ResponderEliminar
  8. Hola Oloman, a mí me gustaría saber como se hace lo que tu tienes con archivos del blog, está muy bien que se despliegue cuando uno lo desea y no la pedazo de lista, un saludo.

    ResponderEliminar
  9. Miguel Eleme lo siento. Vi el mensaje, pero contestando otros se me pasó el tuyo. De todas formas era para decirte que no se me ocurre nada para solucionarlo. El problema es que HTML coge el ' como fin de la expresión y por eso lo trunca. Lo podría arreglar el propietario, pero no sé cómo hacerlo desde este lado.

    Keko, este es el sistema y aquí tienes una ampliación.

    ResponderEliminar
  10. Muchas gracias, Oloman, muy amable. Bueno, pues ya lo arreglarán como tantas otras cosas que están afinando para darles el toque final. Al menos nos permiten adaptar sus artilugios a nuestro gusto, que ya es mucho. Un gran abrazo.

    ResponderEliminar
  11. Gracias Oloman, voy a intentarlo.

    ResponderEliminar
  12. Gracias igual digo!

    Ya lo he probado y me funcionó de lo mejor!!!.

    Saludos!!!.

    ResponderEliminar
  13. Por otra parte. Existe la manera de tambien cambiar el tamaño de los cuadros que si tengan imágenes?. Porque solo se los puedo cambiar a los que no!!!.

    ResponderEliminar
  14. Se explica en el último párrafo de la entrada Birdelo, tanto para blogs con imágenes como para los que no tienen.

    ResponderEliminar
  15. Bien amigo. Muchas gracias por todo. Es que ando medio despistado y no me fijo mucho!!!.

    ResponderEliminar
  16. Hola, algunos blog´s me tienen enlaza, pero no me tienen actualizada, segun gadgets hace 5 meses que no publico
    El otro dia me enlace yo misma a ver que pasaba, y me salio lo siguiente ""Error al analizar las especificaciones del módulo:
    El archivo no tiene el formato correcto,
    falta la cabecera xml"
    Podrías decirme que significa...

    ¡¡gracias!!!

    ResponderEliminar
  17. Jalapa, no sé que te pasa porque ni siquiera he podido ver tu blog. Lo carga pero a continuación, empieza a salir publicidad en ventanas emergentes, Tampoco he podido visitar tu feed porque salía un error.

    Me temo que te has cargado algo de tu plantilla que controla precisamente la base de datos de los posts.

    Aunque también puede ser un problema temporal de Blogger, ya que sólo lo he intentado hoy, es probable que tengas que restaurar tu plantilla. Si tienes una copia de seguridad de una versión que funcionara, estupendo. Si no tendrás que instalar una nueva.

    Lo de la publi es seguro y debe ser cosa de algún gadget que has tomado de algún lado que te la mete. Puede que a tí no te salga, porque hay cookies que te detectan como propietaria. Pregunta a tus lectores habituales.

    Si quieres quitarla tendrás que ir probando a eliminar (guarda el código por si te interesa reponerlo) artilugios hasta que des con el que te inserta el pop-up.

    Saludos y suerte

    ResponderEliminar
  18. Holaaa Oloman!
    disculpá que tarde tanto, me fui con otras cosas y me olvidé de este truquito! ja!
    cuando mencioné el fondo y el scroll, estan en la lista de blogroll, (tengo como fondo papel gris y una barrita al costado para subir y bajar la lista)
    Al hacer los cambios me desaparecieron, así que volví todo a como estaba.
    Y sí había visto el párrafo de achicar las imágenes, sólo que no entendí nada!!! :D
    De todas formas lo dejo como está por ahora, Oloman, ando bastante ocupada, pero quizás otro día te pido ayuda. Un montón de gracias!!!!!
    Un abrazo

    ResponderEliminar
  19. Hola, Oloman, enhorabuena por el blog.

    Acabo de incorporar el artilugio a mi blog, pero me gustaría que la lista de blogs quedase alineada a la derecha, y no dejase un espacio vacío ¿Hay alguna forma de conseguir eso? Gracias

    ResponderEliminar
  20. Hola Planseldon.
    Visita el post http://oloblogger.blogspot.com/2008/06/blogroll-para-blogger.html. Allí podrás ver un apartado llamado "Ver la parte de código configurable".

    Se trataría de incluir esas clases en tu plantilla y darle los valores que necesites. En tu caso, supongo que lo que necesitas se soluciona con un TEXT-ALIGN:JUSTIFY; que tendrías que poner dentro de la clase .BLOG-LIST-CONTAINER .ITEM-SNIPPET {...

    ResponderEliminar
  21. Vaya, resulta que mi código configurable es muy diferente del que tienes en tu otro artículo... ¿será que los de blogger han cambiado el artilugio?

    ResponderEliminar
  22. Planseldon, por lo que he visto en tu código fuente, sí que tienes esas mismas clases en las páginas ya publicadas (prueba en una página tuya con botón derecho-->ver código fuente y buscando por ejemplo "blog-list-tittle" o "item-snippet"

    Lo que ocurre es que cuando editas tu plantilla para modificar, no te deberían salir porque de inicio las controla Blogger internamente. Por eso te comentaba que las tendrías que incluir como nuevas en tu CSS con los atributos que tú quieres.

    ResponderEliminar
  23. Funciona pero en vertical :)

    Lo que ocurre es que tienes definida la clase imagen como un bloque y eso provoca que después de cada una, te meta un salto de línea.

    img {
    border: 0;
    display: block;
    }

    Prueba a quitar el display:block;

    ResponderEliminar
  24. Perfecto!!! Ese era todo el problema. Gracias!

    ResponderEliminar
  25. Hola soy Triky, tengo una duda, hay blogs que me han enlazado en su lista de blog. La pregunta es como esposible que en los demás blog que hay enlazados se le vea una foto en miniatura de su última entrada, y en el enlace de mi blog no se ve? Tengo el feed del sitio completo, hay algo que debo tener activado para que se vea el mio?

    ResponderEliminar
  26. Triki, la miniatura que muestra este sistema es la primera imagen del post que Blogger tenga archivada. Las tuyas están en PhotoBucket.

    ResponderEliminar
  27. Hola!
    Sabes cual puede ser el motivo por el cual mi blog no se actualice en el blogroll de otros usuarios? llevo así más de un día y me preocupa. Gracias!!

    ResponderEliminar
  28. Tendrá que ver con tu feed MFAL, pero en cualquier caso, no sabría cómo arreglarlo. Lo siento.

    ResponderEliminar
  29. Finalmente lo hemos podido solucionar, muchas gracias por tu atención.
    Un saludo

    ResponderEliminar
  30. Gran Blog, estoy aprendiendo mucho con él (me da por toquetear la plantilla cada dos por tres).

    Precisamente ahora, al cambiar a mi plantilla actual, no sé qué sucede que en la Lista de Blogs de mis amigos en vez de salir el título de mi actualización más reciente, les sale el último comentario que se me ha hecho en la actualización más reciente (ver aquí: http://ahorasoloyo.blogspot.com/ )

    Mi blog http://mundoderowan.blogspot.com/

    ¿A qué es debido? ¿Puede arreglarse para que salga el título?

    Gracias

    ResponderEliminar
  31. Perdón por el retraso Rowan. Ando mal de conexión.

    Puede ser que tu amigo/a haya grabado el feed de comentarios (http://NOMBRE_BLOG.blogspot.com/feeds/comments/default )en lugar del feed de post (http://NOMBRE_BLOG.blogspot.com/feeds/posts/default)

    Es lo único que se me ocurre. Un saludo.

    ResponderEliminar
  32. Gracias por la respuesta^^

    El caso es que le pasa a todos los que me agregan :-S

    ResponderEliminar
  33. buenas oloman!

    porque en mi blogroll no me aparecen las imagenes de los Wordpress?

    nsaludo

    ra.

    ResponderEliminar
  34. Lo desconozco Ra. No puedo acceder a tu perfil y por tanto a tu blog, pero supongo que te refieres a la Lista de Blogs. En ese gadget, algunos iconos aparecen y otros no.

    ResponderEliminar
  35. es este blog perdona:
    http://blongh.blogspot.com

    pasa con todos los blogs de wordpress, será por el feed de estos?

    ResponderEliminar
  36. Ya veo que te refieres a las miniaturas de imágenes.

    Sólo con los de Wordpress no. Pasa con todos los que no son Blogspot. Creo recordar que es porque el gadget sólo toma imágenes de Picasa. Pasará también con un blog de Blogger, si este aloja sus imágenes en otros sitios (p.ej.Flickr, Photobucket...)

    ResponderEliminar
  37. ay veces q suben fotos tipo "copiar la ruta de la imagen" esas no estan alojadas en picassa y s ve en los blogspot.

    hmmmmm...:=)

    gracias oloman!

    ResponderEliminar
  38. "¿Copiar la ruta de la imagen?"... no sé a qué tipo te refieres. No obstante, te conté lo que sé sobre el tema. Es algo que desconozco, tal y como te dije al principio.

    ResponderEliminar
  39. gracias oloman!
    eres un referente, sigue con ello;)

    ResponderEliminar
  40. Solo escribo para decir que esta muy lindo el blog. Quien sea el diseñador, +10

    ResponderEliminar
  41. Hay alguna forma de añadir este blogroll en un post?? y no en la sidebar
    Saludos

    ResponderEliminar
  42. Me temo que no Manu, porque los WIDGETS Blogger y los bucles (LOOP), no funcionan dentro de un post.

    ResponderEliminar
  43. Excelente!!!! Muchas gracias! Me sirvió mucho la info y ya lo pude aplicar a mi blog! :)

    ResponderEliminar
  44. Buenas tardes Oloman,te comento que inserté la "lista de blog" en el footer de mi plantilla y al cargar los blogs los va agrupando verticalmente hacia la izquierda,uno debajo del otro,dejando un vacio por el medio y hacia la derecha.
    Me gustaría que se alinearan orizontalmente de extremo a extremo,como podría hacer? saludos y muchas gracias.
    http://cal-fotografias.blogspot.com

    ResponderEliminar
  45. c.a.l ¿Puedes probar con el código de esta entrada? Lo acabo de arreglar porque se ve que en alguna edición me cargué el enlace que lo hacía visible. Ahora sí se ve cuando pinchas.

    ResponderEliminar
  46. Hola Olomán. Siempre he encontrado solución en tu blog pero esta vez no tengo más remedio que consultarte :)
    Nunca he tenido problemas con las miniaturas de mis post en los blogroll de otros blog amigos hasta hace varios dias, sólo aparece el nombre y el título del post, la imagen no. Las tengo alojadas en Picasa y no he cambiado nada, dejé pasar varios días por si fuese algún problema momentaneo en el feed. Ahora sólo me ocurre en los blogrolls pero antes pasaba lo mismo en los post que subia a facebook. Me ocurre con los dos blog que tengo.
    Espero que puedas ayudarme
    Un saludo

    ResponderEliminar
  47. Dolita eso es algo que me supera. Alguien ya me lo preguntó en otra ocasión, pero no sé cómo arreglar ese tema en Facebook. Ya me dices que se ha arreglado, pero que ahora te ocurre en los blogrolls. En este segundo caso, estoy igual, pero supongo que tiene más que ver con la forma en que ellos instalan ese blogroll, que cómo tú tienes tu plantilla.

    Si lo de Facebook se arregló sin tú tocar nada en tu sitio, eso ratificaría mi teoría.

    ResponderEliminar
  48. Gracias de todas formas. Supongo que si no toqué nada,solo tengo que esperar. Desde que te comenté me he dado cuenta que le está ocurriendo lo mismo a otros blogs amigos.
    Un saludo de una casi paisana :)

    ResponderEliminar
  49. ¿Has dicho "casi", Dolita? Creo que esa palabra sobra... :D

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

    ResponderEliminar
  51. yay ya me salieron u.u gracias! pero ahora no se por ke no sale el nombre arriba de *Blogroll* :/ bueno ya vere como lo arreglo gracias de nuevo :D

    ResponderEliminar
  52. Hola, como podría resaltar en negrita o con otro color un enlace de una Lista de Blogs (LinkList)?
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola. Tienes que añadir antes del cierre del SKIN algo así:
      .LinkList a {
      font-weight: bold;
      color: #red;
      }

      Eliminar
    2. No me ha funcionado :(
      Lo que digo yo es que un enlace concreto de una Lista de Blogs (BlogList) se pueda resaltar de los otros, en negrita o de otro color. Se puede?

      Eliminar
    3. ¿Sólo uno? Se me ocurre que podría ser con selectores CSS, pero para no tener que escribir en un comentario todo un curso de selectores, por favor dime cual es el enlace de destino. Con eso te paso el código a ver si hay suerte.

      Eliminar
    4. Si solo uno. Es un blog que estoy haciendo y esta en construcción: www.bestutilidades.blogspot.com
      SI te das cuenta, hay diferentes gadgets de Listas de Blogs y lo que me gustaría es que en cada uno de esos gadgets resaltar un enlace como si fuera el mejor enlace de entre esos.
      También he pensado que si no funcionase hacerlo manualmente con HTML poniendo enlaces, lo que no se es como poner el favicon de esos enlaces, por eso recurro a la Lista de Blogs.
      Saludos

      Eliminar
    5. Vale. Acabo de repasar un post antiguo y lo que quieres precisamente se puede hacer con lo primero que se explica:
      http://www.oloblogger.com/2010/06/selectores-de-atributos.html

      Eliminar
    6. No he acabado de entender en que parte del blog tengo que poner lo que explica al principio de esa entrada, la entrada si que la he entendido.

      Eliminar
    7. Es CSS, por tanto tienes que ponerlo en tu hoja de estilo. En Blogger sería en la plantilla, entre las etiquetas SKIN, junto con el resto de CSS.

      Eliminar
    8. LO he probado con http://panoramio.com y no me ha cambiado de color.

      Eliminar
    9. Se resiste. Añádele un !important de esta manera:
      a[href="http://panoramio.com"] {
      color: #F37937 !important;
      }

      Eliminar
    10. El enlace que he puesto de Texto con un enlace de Panoramio si que funciona el gadget de Lista de Blogs no.
      Como se esta complicando esto...

      Eliminar
    11. A ver qué tal así:

      .sidebar .widget a[href*=["viadeo"] {
      font-size: 24px;
      }

      Eliminar
    12. Pues a mí me ha funcionado en todos los casos. El último era sólo para que no hubiera confusión con los enlaces visitados, a modo de prueba, y sólo incrementaba el tamaño ¿sucedió?

      Eliminar
    13. Pues sólo me queda decirte que algo no estás haciendo bien, porque como te decía, todo eso lo probé directamente en tu blog y funcionó en todos los casos. Me tendrías que escribir detalladamente qué haces y así quizás descubriría algo.

      Eliminar
    14. Okey.
      Mira, por ejemplo cojo el enlace "Cameroid" que hay en la cuarta columna en el gadget Editores de Imágenes, entonces pongo antes de }]]> esto:

      .sidebar .widget a[href*=["http://www.cameroid.com/"] {
      font-size: 24px;
      }

      En vista previa no funciona pero igualmente le doy luego a guardar. Eso es lo que hago y no obtengo resultado...

      He puesto el enlace de Cameroid en un gadget de Lista de Enlaces para ver si el problema esta en la Lista de Blogs, pero no sigue sin funcionar.

      Saludos

      Eliminar
    15. :( Cometí un error al copiar el código. Tendría que ser un solo corchete de apertura. Prueba esto y perdón por el fallo:

      .sidebar .widget a[href*="cameroid"] {
      font-size: 24px;
      }

      El *= quiere decir "contiene" por lo que no hace falta poner la dirección completa. A ver si ahora...

      Eliminar
    16. Perfecto! Ya funciona! Gracias por todo!

      Eliminar
    17. ¡Por fin! Menos mal :)

      Eliminar
  53. Oloman quisiera modificar el tamaño de la imagen en la lista de blogs se que el tamaño es 72x72 pero como poder modificar este detalle,y tambien el numero o cantidad de palabras que quisiera que vaya ahi como descripcion espero tu respuesta muchas gracias

    ResponderEliminar
    Respuestas
    1. Lo de las imágenes lo puedes hacer con este pequeño script, cambiando la clase que se cita en el ejemplo por la que tiene la Lista de Blogs. Con respecto a la cantidad de palabras, eso no se puede modificar desde ese gadget. Habría que reconstruirlo, es decir, crear algo que formara algo similar con JSON sin usar el gadget "oficial".

      Eliminar
    2. Muchas gracias Oloman, siempre oon las palabras exactas, si en caso sepas como cambiar la cantidad de palabras te agradeceria que subas un tutorial, igual muchas gracias

      Eliminar
    3. Sinceramente no creo que me ponga con ello, ya que sería demasiado trabajo para mí en proporción a lo que puede aportar el cacharrito. Si veo algo hecho por otro ya lo cuelgo.

      Eliminar
    4. Igual muchas gracias pro tu tiempo si encuentro algo te aviso para que lo subas :D

      Eliminar
  54. No se ve lo que hay detrás de :

    hay que sustituirlo entero por este otro

    No se abre, ¿se podría solucionar?

    Un saludo y gracias.

    ResponderEliminar
    Respuestas
    1. Sí, perdona. Es una entrada antigua y el código se desplegaba con una librería que actualmente no uso. Ya lo he arreglado ;)

      Eliminar
  55. Hola me llamo Ana y mi blog no se actualiza en la ventanita de blogs que sigo ....que puedo hacer necesito ayuda porque tengo 50 años y no soy experta en esto ...ayuda

    ResponderEliminar
    Respuestas
    1. Yo lo veo bien. El post que sale de tu blog es precisamente el último que has publicado...

      Eliminar