29/5/13

Cómo poner imágenes en las etiquetas de Blogger

Hoy Sonia, la artista que está detrás de los amigurumis tan bonitos del blog El Gallo Bermejo, nos trae un tutorial genial GENIAL.

Tras hacer el Curso Dos se quedó con ganas de más, así que en lugar de esperar a un Curso Tres (si es que hay, no prometo nada), se puso a investigar por su cuenta hasta que dio con algo que quería hacer.

Además tenía ventaja porque es, de profesión, informática ;)

De todos modos no me enrollo porque ya lo hace ella. Al loro con el discursito jajaj ;P

Os dejo con Sonia:

Nota: Este es un post invitado. No está escrito por mí, pero me ha parecido interesante compartirlo en Personalización de Blogs.

POST INVITADO

Queridas lectoras (y lectores :)) del blog de Blanca:

Si leéis esto, significa que estoy colaborando en su blog (esperad, que me pellizo), y por unos momentos tengo el honor de tener vuestra atención sólo para mí. Es como ganar un Oscar y disponer de unos pocos minutos de gloria delante de un micrófono y un montón de personas elegantes. Tengo el discurso preparado, y aunque sé que la organización me pide brevedad, yo no puedo dejar pasar mi momento de gloria sin saludar:

"Saludo a todos las blogueras (y un bloguero, Javi) que he conocido gracias a las fiestas de enlaces de Blanca, sus iniciativas como el reto-twitter y los comentarios que todos vamos dejando en sus posts; todos ellos sin excepción han sido encantadores y cariñosos conmigo. Y a aquellos con los que todavía no he tenido la suerte de cruzarme, también os saludo; espero que tengamos ocasión de hacerlo. Y ya puestos, antes de que me quiten el micrófono, doy las gracias a mi marido, mando un beso gordote a mis dos mochuelos y a mi madre, y saludo a mis amigos..."

En fin, antes de que me echen a patadas, os explico qué vengo yo a contaros, que por algo estoy aquí: cómo poner imágenes a las etiquetas de vuestras entradas. Y para que nadie se me pierda, lo he dividido en dos partes: qué vengo a enseñar y cómo se hace. Así que ahí vamos.

QUÉ

La mayoría de vuestros posts o entradas tienen etiquetas (labels) que definís vosotros mismos cuando escribís el post. Es una forma muy buena de clasificar las entradas para posteriormente realizar búsquedas eficientes sobre ellas.

Ejemplo:

Yo, cuando escribo una entrada de algún muñeco amigurumi, pongo etiquetas indicando el color del muñeco (por ejemplo, rojo), la forma que tiene (por ejemplo, oso) y el nombre con el que está personalizado (por ejemplo, Diego). De esta forma, si alguna persona quiere buscar un regalo que sea rojo, puede buscar por la etiqueta rojo y le aparecerán todas las entradas con algo rojo. O si quiere que sea un osito podrá buscar por la etiqueta oso y aparecerán todos los osos. O a lo mejor no tiene muy claro ni el color ni la forma, pero es para un niño llamado Diego y quiere ver ideas de otros regalos que se han hecho para otros Diegos.

Por defecto, Blogger coloca debajo de la entrada las etiquetas que habéis definido para esa entrada (como enlaces), y separadas por comas. Es decir, algo así:

En el ejemplo que os he puesto, la entrada tiene 6 etiquetas: la de amigurumi, una que indica que es un perro, tres de colores (azul, gris y rojo) y la del nombre del niño.

Lo que yo os propongo es modificar mínimamente la plantilla para asociar a cada una de las etiquetas que tenemos una imagen (algo muy sencillo, que nadie se asuste). De esta forma, las etiquetas de nuestra entrada tendrían este otro aspecto:



Como podéis ver, lo que he hecho es asociar a todas las etiquetas menos a la etiqueta Rodrigo una imagen que la caracterice.

Podemos utilizar las mismas imágenes para organizar las etiquetas en las búsquedas y de esta forma dar un aspecto coherente a nuestro blog.

Yo en mi caso he creado tres imágenes (Busca un animal, Busca por color y Busca otras formas), cada una de ellas con enlaces a las etiquetas en las distintas búsquedas que tengo y he colocado las tres en la columna derecha de mi blog (Nota: en el curso dos de Blanca aprenderéis a que de una misma imagen, cada zona lleve un enlace distinto para poder hacer esto mismo; si no lo sabéis, no podéis perdéroslo):



CÓMO

Ya que es necesario modificar la plantilla, hay que tener las precauciones de siempre:

  • Salvar la plantilla antes de empezar
  • Mirar la vista previa antes de guardar los cambios introducidos para asegurarnos de que no hemos estropeado nada

Dicho esto, los pasos que tenemos que hacer son los siguientes:

1) Diseñar cada una de las imágenes que queremos utilizar en nuestras etiquetas. No es necesario que asociéis una imagen a cada etiqueta, sólo para aquellas etiquetas que os apetezca. Podéis utilizar Picmonkey (Otro inciso: Blanca ha diseñado una guía para utilizar Picmonkey que es una maravilla), Photoshop, o cualquier otro programa que os guste. O descargar la imagen de la red de los múltiples sitios con imágenes gratis que existen

2) Subir las imágenes a nuestro blog y guardarnos la URL de cada una de ellas (Nota: para los que no sepáis cómo hacerlo, en el curso dos de Blanca se explica perfectamente)

3) En un editor de texto, escribir tantas líneas como ésta como etiquetas con imagen queráis configurar, modificando el texto que está en azul por vuestro nombre de etiqueta y la URL de vuestra imagen:

<b:if cond='data:label.name == "NOMBRE DE VUESTRA ETIQUETA"'><img src='URL DE ESA IMAGEN'/></b:if>

Ejemplo:

Si yo quisiera asignar una imagen a tres de mis etiquetas, por ejemplo las etiquetas rojo, rosa y azul, mi código tendría que tener tres líneas como la de arriba, una por cada una de las etiquetas a las que quiero asignar una imagen:



4) Una vez escrito todo nuestro código, sólo hay que insertarlo en el sitio concreto de nuestra plantilla. Para ello, nos vamos a editar la plantilla y buscamos la siguiente cadena (Ctrl+F):

<b:loop values="data:post.labels" var="label">

Nota: aunque Blanca nos envió una nota con los cambios que ha hecho Blogger en la plantilla, aquellas que no tengáis el curso dos no os procupéis, ya que no hay que desplegar los artilugios. Simplemente buscad: 

data:post.labels

5) Y justo detrás de esa línea, copiamos todas nuestras líneas de código que habíamos escrito y... ¡Ya está terminado! Recordad que debéis mirar la vista previa antes de guardar por si nos falta alguna comilla o algo por el estilo.

Yo he creado las imágenes con un tamaño de 45 x 45 píxeles por si queréis tomar ese tamaño como referencia y así hacerlas más grandes o más pequeñas.

Me iré pasando por aquí de vez en cuando a leer vuestros comentarios para contestaros.

Y ahora ya sí, saludo al respetable público, suelto la lagrimita de rigor y feliz con mi premio en los brazos me dispongo a bajar por las escaleras del teatro Kodak, esperando no caerme con los tacones y mi vestido de fiesta. ¡Nos leemos!



¡Mil millones de gracias, Sonia, por el pedazo de tutorial!

Estoy segura de que os habrá encantado, ¿no?

Beso gordo y nos vemos el viernes en la fiesta :)


P.D.: Hemos añadido este apéndice con una explicación extra a través de una duda de una lectora. No os perdáis en este otro post cómo alinear las imágenes al centro para que queden bien ordenaditos los dibujitos en las etiquetas :)

Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

50 comentarios

  1. ¡Me encanta la idea! Muchísimas gracias por compartir este pedazo de tutorial!.

    ResponderEliminar
  2. Un tutorial muy chulo...Felicidades Sonia!! y Gracias Blanca!!

    Besines ;)

    ResponderEliminar
  3. Hola! Justo hoy hablaba yo de esto de los tutoriales de los blogs.
    Me ha parecido una idea estupenda que me encantaría aplicar a mi blog, pero no he comprado el Curso de Blanca, así que me faltan pasos intermedios que mencionas que se explican en dicho curso.
    Así que por ahora me quedo con las ganas, que mi economía está más bien justita y tengo otras prioridades.
    Pero me ha gustado mucho el tutorial, lo explicaste todo muy clarito!

    ResponderEliminar
    Respuestas
    1. Hola!

      Ya, es que si no los tutoriales se hacen larguísimos. En los cursos vamos viendo las cosas básicas que tenéis que saber sí o sí y ya los tutoriales siempre van partiendo de que sabéis esas cosas...

      (Además que yo también tengo que comer ;)

      Besitos

      B.

      Eliminar
  4. Como siempre un placer leer tu blog en el que se aprenden un montón de cosas, y gracias a Sonia por esta fantástica idea, yo no recibí mi tutorial de pincmonkey, seguro que rellené mal el formulario, que lástima, un besito para cada una

    ResponderEliminar
    Respuestas
    1. Alba, pues vuelvelo a rellenar (pero rellenalo bien... ;)

      No voy para atrás (es decir, los que estaban mal se quedan sin mandar), pero si lo rellenas de nuevo lo veré y te lo enviaré (cuando me ponga, quizá a final de semana)

      Besos,

      Eliminar
  5. Siiii!! Por fin hay fecha para el curso de medios sociales!!! Estoy deseando comprarlo *-*

    Por otro lado ha sido un tutorial genial Sonia!! Muy bien explicado y de seguro muy útil para muchas de nosotras =)

    Mireia

    ResponderEliminar
  6. Que buen post. Ya me había fijado en los dibujitos de tus etiquetas hace tiempo y me preguntaba cómo se hacía!! Ahora ya lo sé!! Y hoy me pongo a probarlo!!! :-)

    Blanca me alegro de que tus días de retiro te hayan venido tan bien!! Un besazo!!

    Patricia

    ResponderEliminar
    Respuestas
    1. Gracias!
      Cuando lo tengas avísame y te visito rauda y veloz a ver cómo te han quedado!

      Un besote,
      Sonia.

      Eliminar
  7. Genialosa entrada, gracias por compartir cosas tan estupendas.

    ResponderEliminar
  8. Perfecto! hace un par de días estaba pensando en cómo se haría esto! Lo dejo para probar durante el fin de semana, que es cuando tengo más tiempo.

    Blanca, ¿los tutoriales de los post invitados tambien se incluyen en el índice del apartado de TUTORIALES de tu página? Ahora no sé encontrarlos (igual los tengo delante de mis narices) y así, cuando queramos ponernos con uno antiguo lo encontramos fácilmente.

    Un beso!y muchas gracias por estos tutoriales tan útiles!

    ResponderEliminar
  9. Que bien explicado, que útil y que arte Sonia! Enhorabuenaaaa! Tomo nota y cuando tenga algo de tiempo intentaré aplicarlo a mi blog ;) Besitos!!!

    ResponderEliminar
    Respuestas
    1. Sí, hazlo, que en tu blog y con tu arte puede quedar fenomenal.

      Un beso.

      Eliminar
  10. Bueno, bueno, bueno!! Tengo muchas cosas que decir de este post!! Lo primero que la introducción ha sido muy amena y divertida, muy buen discurso pero te has olvidado de dar las gracias a la Virgen de la Macarena, jejejeje! Lo segundo, es que me he pasado por su blog y está absolutamente precioso!! Esta manera de clasificar las etiquetas me ha parecido muy original y vistoso, te felicito por la idea. Y por último, que lo has explicado super-requete-bien, y que te ha quedado un tutorial super currado y muy bien explicado. Felicidades Sonia y gracias a Blanca por compartirlo.

    Besos

    ResponderEliminar
    Respuestas
    1. Muchas gracias, guapa. Me alegro de que te guste y de que se entienda bien. Y me alegro de que te guste mi discurso, era mucho más largo pero por motivos obvios tuve que acortarlo para no aburrir al personal. Claro que lo de la virgen de la Macarena si se me llega a ocurrir lo cuelo fijo :)

      Un besote.

      Eliminar
  11. joo mil gracias a ti y tu maravillos blog
    ya estoy hecha toda una ''hacker''

    ResponderEliminar
  12. Buenísimo!!!!!! Muchas gracias. Blanca aunque no publiques a diario o no te comentemos siempre. Estamos super pendientes de tus publicaciones; tu blog es lo máximo y sería una tontería perdérselo.
    Besitos
    Ale
    Tartas y Dulces "Mi Negrita"

    ResponderEliminar
  13. Que útil, puede que algún día lo use ;)

    ResponderEliminar
  14. Qué bien que ya estás de vuelta y encima anunciando sorpresa...pues conociéndote será de las gordas!!! Ay q nervios...

    Cómo se nota q Sonia ha comprado tus cursos pues ha explicado fenomenal...además de ser un tutorial muy útil...

    Un besote

    ResponderEliminar
  15. Muchas gracias a las dos, ahora mismo me pongo a dibujar, aunque como cada día os leo un tutorial no me da tiempo a hacerlo todooooo. Sois geniales!!
    Tengo una duda a ver si alguien que me lea por aqui me puede ayudar.
    Quiero poner encima de los gadgets (etiquetas, archivo del blog, etc) una imagen, es decir, el título del gadget pero con una imagen mía. Eso lo sé hacer pero luego me dice blogger que no puedo dejar el título en blanco...

    ¿Sabéis que puedo hacer? Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Leti, me alegro mucho de que te guste el blog!

      Lo que preguntas lo vemos en el Curso Uno para blogueras.

      Si aún estás empezando quizá te convenga echar una ojeada a los cursos (Curso Uno y Curso Dos) para aprender todos los básicos y luego ya poder seguir todos los tutoriales y todo y tener tu blog preciosísimo! :)

      Un beso,

      Blanca

      Eliminar
  16. Pues fenomenal, aunque a esto hay que dedicarle un ratito largo para hacerlo bien. Muchas gracias y un saludo a las dos!

    Podemos charlar juntas

    ResponderEliminar
  17. Nunca habia fijado los dibujos de las etiquetas, es buena idea ^^

    ResponderEliminar
  18. Gracias! De esa forma las etiquetas quedan más intuitivo y visual, cosa que siempre viene bien, y sobre todo, más graciosas.

    Un saludo!

    ResponderEliminar
  19. Me parece un post estupendo, y queda muy chulo en el blog de Sonia.
    Muchas gracias por compartirlo!
    Pensaré a ver como lo puedo aplicar en mi blog.
    Besos

    ResponderEliminar
    Respuestas
    1. Seguro que encuentras la manera, cada una con su estilo, pero hay muchas formas de sacarle partido.

      Un beso!

      Eliminar
  20. ¡Genial Sonia! Como yo si tengo el curso 1 y el 2, me pondré manos a la obra, me parece una idea fantástica. ¡Muchas gracias por el tutorial! Muy bien explicado por cierto. Y gracias Blanca por aportar siempre algo para mejorar nuestro blog, y de paso presentarnos a otras blogueras geniales.
    Eli

    ResponderEliminar
    Respuestas
    1. Síííí, hazlo y cuando lo tengas me lo dices para ir rápida a verlo!

      Un beso.

      Eliminar
  21. genial post!!!! gracias por el guiño Blanca!!!!

    ResponderEliminar
    Respuestas
    1. Oye, que esta vez el guiño es mío :-P

      Eliminar
    2. jajajajj! pues si te digo la verdad pensaba que lo había añadido blanca!!! pues entonces gracias a las 2, una por la mención y la otra por elegirte! un tuto muy molón!!!! enhorabuena!

      Eliminar
  22. ¡Qué buen tutorial! Me ha encantado. La verdad es que es una idea estupenda.
    Me alegro de que lo hayas pasado bien estos días. A ver qué cosas nos cuentas ;)
    Besos.

    ResponderEliminar
    Respuestas
    1. Muaaah :)

      ¿Te he dado las gracias por que siempre me comentas?

      Por si no lo he hecho: gracias guapísima!!!! :)

      Eliminar
  23. Hola Blanca!!!
    Acabo de conocer tu blog y me encanta!!! Estoy intentando modificar mi blog y tus tutoriales me sirven de mucha ayuda. Aunque soy un poco torpe para esto de la informática. Quería preguntarte si tienes algún tutorial o si puedes explicar dónde conseguir imágenes bonitas para el favicon, tipo como la mariposita que tienes puesta en tu blog, alguna flor, un corazoncito,...cualquier cosa que quede coqueta.
    Muchas gracias por tu ayuda.
    Un abrazo,
    Nati

    ResponderEliminar
    Respuestas
    1. Mi mariposa es de PicMonkey :)

      Ahí tienes un montón de imágenes!

      De todos modos todo esto lo vemos en el Curso Uno para blogueras. Si aún eres nueva en esto de los blogs igual podrías echarle una ojeada. Seguro que te ayuda mucho!

      Un beso y BIENVENIDA!!!

      Blanca

      Eliminar
    2. Muchas gracias Blanca!
      Le voy a echar un vistazo al curso Uno para blogueras y cualquier duda para inscribirme ya te pregunto. Voy también a mirar lo del PicMonkey,...es que soy nueva en ésto y me causa mucho respeto toquetear las plantillas de blogger no vaya a que la fastidie,..y lo de toquetear html ya ni te cuento,...pero espero poco a poco ir diseñando algo que quede bonito. De echo todavía no me he atrevido a publicar ninguna entrada en el blog porque quiero ponerlo a mi gusto antes,..Bueno voy a mirar lo que me dices
      Un abrazo,
      Nati

      Eliminar
  24. Que lindisimos!
    Blanca acabo de encontrar tu blog y me encanta muchisimo!!! Yo todas mis dudas las buscaba en ingles y nose porque justo ayer empeze a buscar ayuda en espanol y encontre tu blog!!! yeeee!!! Gracias por todos esos posts!
    Lo que si no pude encontrar en como poner el LIKE BOx debajo del titulo de cada post y tambien el COMMENT BOX debajo de cada post.
    Por mas que intento e intento no puedo hacerlo nose porque!!!???
    Si haces un post de eso te lo agradeceria de todo corazon !! :D
    Besitos desde USA
    ♥♥

    Angel 11-11

    ResponderEliminar
    Respuestas
    1. De eso no tengo tutorial.

      Lo apunto en mi lista de ideas, pero por ahora tengo ya muy larga la lista así que sigue buscando en otro lado que no promoeto nada pronto ;P

      Un beso y bienvenido!!! :)

      B.

      Eliminar
  25. Un tutorial de campeonato! Enhorabuena a ambas, me faltan los pasos previos porque obviamente no tengo tus cursos (entono el mea culpa), pero por ahora no puede ser, más adelante seguro. Porque con los pocos cambios que he ido haciendo en mi blog, en estas pocas semanas que llevo aplicando tus consejos, he notado un cambio bastante considerable en la audiencia, y eso sólo puede ser obra tuya. Así que te lo agradezco de corazón, por tu ayuda desinteresada, por tus post prácticos y divertidos y ...VIVA LA MADRE QUE TE PARIÓ!
    La semana que viene participaré en la fiesta de enlaces, porque me he venido a la feria de Córdaba y no puedo estar en el caldo y en las tajadas! Un besazo! Por cierto no he recibido aun la guía picmonkey, cuánto tiempo tardas en enviarla? Será que habré hecho algún paso mal? Bueno mil besos y gracias de nuevo!

    ResponderEliminar
  26. Gracias por este tutorial, esas etiquetas son preciosas! Me pondré manos a la obra en cuanto tenga un ratito, porque me han encantado. Un besito para los dos, para Blanca y para Sonia por compartir.

    ResponderEliminar
  27. genial, nunca había visto nada parecido. Una colaboración de lujo, sin duda! enhorabuena a las dos :)

    ResponderEliminar
  28. Un tutorial excelente! Gracias por compartir! Un beso

    ResponderEliminar
  29. Muchas gracias por toda la información que nos das, es de agradecer ya que cuando una empieza en este mundo de hacerlo todo una mismas, se encuentra perdida y aquí encuentro mucha información para mi proyecto de presente.
    Isa

    ResponderEliminar
  30. Hola de nuevo! he estado probando este tutorial y la verdad es que queda genial!y coincido con todas en que está muy bien explicado!pero tenía una preguntita...(lo he estado buscando y por lo que he encontrado en internet no me sale! y como Blanca bien dice en sus cursos: no fiarse de según qué se publica en internet! ;), pues me atrevo a p reguntar por aquí! ;S) ¿Qué pasa si no queremos texto en las etiquetas?Es decir, que sólo sea imagen? ¿Cómo se puede hacer?

    Muchas gracias!!!

    ResponderEliminar
    Respuestas
    1. Hola!

      Pues sí se puede hacer, y no es muy complicado. Voy a preparar un post explicándolo de la forma más clarita posible, y cuando a Blanca le cuadre en su agenda, lo publicará. ¡Estate atenta!

      Ah, y a ver si nos muestrar cómo te quedan las etiquetas, me muero de curiosidad :)

      Un beso,
      Sonia.

      Eliminar
  31. Hola Sonia!! Me gustaría saber si también se aplica al menu horizontal de las etiquetas (el que va debajo de la cabecera del blog). No logro cambiarlo.
    Gracias y un saludo,
    MamyPops

    ResponderEliminar
  32. Hola Sonia! He seguido todos los pasos como indicas, pero cuando le doy a vista previa todo el contenido de los post aparecen en blanco (solo aparece la sidebar y el pie de página). ¿Me podrías ayudar?
    Gracias!

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.