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