Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Imágenes diferentes según la etiqueta bajo el título de las entradas

Lo que vamos a conseguir con este truco que se me ha ocurrido es algo muy útil, que nos puede ayudar a roganizar el blog de otra forma, a crear un índice, a destacar las entradas de una etiqueta o categoría específica...

Básicamente lo que haremos es introducir un código en la plantilla que permitirá mostrar una imagen (o un enlace / texto) en especial en todas las entradas de una etiqueta.

Pongamos un ejemplo para entenderlo mejor. Si yo tengo un blog con las siguientes etiquetas: peces, perros y gatos, insertaré en el código el nombre de cada animal y una foto que después aparecerá en las entradas con esa etiqueta para describirlo.

En la siguiente imagen puedes ver como cada entrada tiene su correspondiente imagen (la primera entrada tiene la etiqueta "peces", la segunda "perros" y la tercera "gatos").





Las fotos aparecerán en todos los artículos con la etiqueta "perros, gatos o peces" respectivamente, lo que ayudará bastante a tus lectores.


Diseño>Edición de HTML>expandimos artilugios




Busca este bloque de código:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Y justo debajo añade esto:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
</b:loop>

Reemplaza en el código:

ETIQUETA por la etiqueta que desees. Ten en cuenta que tienes que escribirla tal y como aparece en las entradas del blog (con mayúsculas o minúsculas).

URL DE LA IMAGEN por la dirección del icono o la imagen que representará a la etiqueta que incluyas.

Si deseas añadir más etiquetas y por tanto, más imágenes, utiliza esta línea tantas veces como quieras:

<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>

Pero recuerda que debes pegarla siempre antes del cierre </b:loop>.

Las imágenes aparecerán a la derecha del título pero puedes centrarlas o alinearlas a la izquierda cambiando align='right' por align='center' o align='left'.

Finalmente guarda la plantilla:

Héctor dice...

Que tal, Jaime. Oye, y ya puestos en esto, ¿se puede hacer que dando click a las imagenes (el pez, por ejemplo) nos lleve a las entradas por categoría (peces)?

Se me ocurrió, pues.

Un saludo.

Laube Leal dice...

Jaime, chiquillo... qué cosa m´s curiosa!. Tengo que ver si me puede venir bien a mí para mis distintos tipos de cocina...
Gracias guapetón!!!!!!!

♥ Ana dice...

olé que pedazo de truco más chulo, de momento tengo una misma imagen en cada etiqueta, y, me gusta así pero, lo mismo, mañana me da el cuarto de hora y pongo una imagen diferente en cada una porque seguro que quedaría genial
Siempre aprendo muchísimo con tus trucos y, algunos de ellos se los he pasado a l@s lectores de mi blog pero, por supuesto, poniendo siempre de donde los he sacado, ya sea de tu blog o de algún otro que también nos ayuda mucho
Sois dignos de alabar por vuestra ayuda desinteresada, de corazón, muchas gracias
Un besote

Analía dice...

¡¡Perfecto!!

Me gustó la idea. Es justo lo que andaba buscando ¡¡leiste mis pensamientos!!

GRACIAS JAIME, abrazo argentino

ah, lo probé ACÁ

Yo dice...

Este truco está re bueno... a probarlo! :)

(Y muy cierto que nos puede ayudar a "roganizar" el blog. ajaja, errores de la relación: dedo / teclado. A mí también me ha pasado y muchas veces :D)

Saludos

Viajes Erráticos dice...

Hola Jaime,
Lo primero felicitarte por tus explicaciones tan claras y sencillas, he puesto en práctica alguno de tus trucos y me han salido a la primera.
De paso, queria comentarte si es posible poner una foto con categorías y subcategorías como entrada fija. Estas no podrían mezclarse con las que hay en el blog, pues la intención es separar del resto un tema nuevo.
En caso positivo, me podrías dar una pista de cómo hacerlo?, o bien, tienes algo publicado al respecto?
Gracias de antemano y un saludo.

Viajes Erráticos dice...

Hola Jaime,
Lo primero felicitarte por tus explicaciones tan claras y sencillas, he puesto en práctica alguno de tus trucos y me han salido a la 1º.
De paso, quería preguntarte si es posible poner una foto con categorías y subcategorías como entrada fija. Estas no podrían mezclarse con las categorías que hay en el blog porque la intención es separar del resto un nuevo tema.
En caso positivo, me podrías dar una pista de cómo hacerlo?, o bien, tienes algo publicado al respecto?
Gracias de antemano y un saludo.

Jaime Trujillo Escobedo dice...

Tendría que probarlo, Héctor Gutiérrez, parece una idea muy buena.

Jaime Trujillo Escobedo dice...

Laube, lo cierto es que te puede venir muy bien.

Podrías hacer un índice "visual" y que cada icono representase una etiqueta (entrantes, postres, segundos platos...) para después mostrarlo en las entradas y, de esta forma, hacer que los lectores de tu blog reconozcan las entradas rápidamente.

¡Abrazotes!

Jaime Trujillo Escobedo dice...

Ana, como dices, te puede quedar muy bien ^^. Si necesitas ayuda durante la instalación no dudes en avisarme.

Es maravilloso saber que los artículos del Balcón son leídos de blogger en blogger.

Muchísimas gracias a ti por comentar.

¡¡Abrazos!!

Jaime Trujillo Escobedo dice...

Hola Garabato! ya veo como te quedó. Debo decirte que me llamó la atención tu blog de pruebas (me encanta la forma en la que explicas todo lo que te va pasando, las cosas que vas descubriendo con los códigos y los resultados que obtienes al realizar los trucos) ;).

¡Abrazos!

Jaime Trujillo Escobedo dice...

Cierto, Yo, ¡está requetebueno! suerte con la implementación.

Jaime Trujillo Escobedo dice...

Marbiel, ¿te refieres a crear una especie de "índice" que se sitúe encima de las entradas del blog para que no se mezcle con otros posts y que permanezca siempre a la vista?

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo