JMiur [E]

Esta idea la escuché varias veces y siempre me pareció que era algo que podía hacerse pero no estaba muy seguro de cómo hacerlo. La inquietud de Gem@ me hizo pensar otra vez en el tema, el tiempo nos va dando algún que otro conocimiento y, sobre todo, algo de audacia .... entonces ¿qué pasaría si ...?

La pregunta concreta es esta:

¿Hay alguna forma de reemplazar los textos de las etiquetas por imágenes? Ojo, no hablamos de cambiar el texto "Etiquetas" que se ve al pie de página de cada post, eso es sencillo, basta buscar el código: <data:postLabelsLabel/> y poner en su lugar una imagen o un texto personal.

Tampoco se trata de anteponer un ícono a la lista de etiquetas, eso también se resuelve con sencillez anteponiendo la imagen a: <data:label.name/>

Lo que se quiere es asociar el nombre de una etiqueta con una imagen específica, es decir, si mi etiqueta es "Perro", mostrar un perro y si es "Elefantes rosados", mostrar un elefante rosado.

Y bien, la respuesta es sí, se puede, casi diría que es sorprendentemente sencillo así que le contesté a Gem@ su mail dándole la posibilidad de explicárselo personalmente o publicarlo. Rápidamente respondió: "Me parece ideal que lo publiques, creo que puede interesar a todos ... ¿A qué estás esperando?".

Eso me pasa por preguntar. Dejé mis jueguitos y me puse a hacer lo que me ordenó.
Para resolver el tema debemos partir de una limitación: dónde alojar las imágenes a utilizar. Si las subimos a Blogger, las direcciones URL que tendremos serán, como mínimo, estrafalarias; no tenemos forma de deducirlas, cada una es diferente y NECESITAMOS SABER dónde están las imágenes, lograr que la dirección URL sea algo fijo donde sólo cambie el nombre del archivo y no el resto del dominio ni el directorio donde están guardadas.

No podemos usar Blogger y por la misma razón no podemos usar ImageShack sin embargo, hay varios servicios que establecen una dirección fija: Photobucket, Fileden, Google Pages, Hostfile, etc. En algunos de ellos incluso podemos crear carpetas, de esta manera, todas las imágenes tendrán la misma estructura, por ejemplo:

http://xxxxxx/nombre_Archivo1.ext
http://xxxxxx/nombre_Archivo2.ext

Entonces, como primera medida, subimos las imágenes a uno de esos servidores, todas con el mismo formato y extensión (jpg, png, gif); lo único que debe cambiar es el nombre del archivo que deberá ser exactamente igual al nombre de la etiqueta; es decir, tendremos alojadas tantas imágenes como etiquetas y todas las direcciones serán similares:

Si la etiqueta es perro:
una imagen PNG estará en http:un_servidor/perro.png
Si la etiqueta es elefantes rosados:
una imagen PNG estará en http:un_servidor/elefantes rosados.png

Los tamaños de las imágenes no tienen importancia, eso dependerá de cómo queremos mostrarlas, pueden ser todas iguales o todas diferentes.

Debemos saber que hay dos lugares del blog donde se muestran las listas con las etiquetas: debajo de cada post o en un elemento Labels en la sidebar, el header o el footer. Empecemos con este último.

Blogger permite agregar varios elementos Labels así que, si ya tenemos uno no hace falta sacarlo, en todo caso, esa es una decisión posterior. Vamos a la Plantilla y en Elementos de la página, agregamos el elemento y lo configuramos como se nos ocurra. Guardamos y ahora vamos a Edición HTML y marcamos Expandir artilugios.

Buscamos el código de ese elemento recién agregado que, será más o menos este:
<b:widget id='Label2' locked='false' title='El_Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <h2><data:title/></h2> </b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
Si se fijan, las etiquetas se muestran en una lista, eso es lo que está definido por los códigos:
<ul>
<li>
... las etiquetas ...
</li>
</ul>
Dependerá mucho de cómo vamos a mostrarlas pero, en principio, podríamos eliminar esas líneas o darles una clase para luego poder manipularlas con CSS:
.sidebar ul.listaetiquetas {
... propiedades ...
}
.sidebar li.etiquetaimagen {
... propiedades ...
}
Luego, la parte importante, reemplazar el texto de la etiqueta (<data:label.name/>) por la imagen correspondiente; para esto, vamos a usar una facilidad de Blogger, crear una expresión:
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
Esto se encuentra en dos líneas diferentes. Cambiamos ambas pero reemplazamos http://nuestro_servidor por la dirección del servidor donde esté alojada la imagen y ext por la extensión del tipo de archivo que utilicemos. Y ya que estamos, también eliminamos el contador (<data:label.count/>). El código quedaría así:
<b:widget id='Label2' locked='false' title='El_Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <h2><data:title/></h2> </b:if>
<div class='widget-content'>
<ul class='listaetiquetas'>
<b:loop values='data:labels' var='label'>
<li class='etiquetaimagen'>
<b:if cond='data:blog.url == data:label.url'>
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
<b:else/>
<a expr:href='data:label.url'>
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
</a>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

Lo mismo podemos hacer con las etiquetas que se muestran debajo de los posts, esto lo vamos a encontrar en:

<b:includable id='post' var='post'>

Por defecto, el código de esa parte es el siguiente:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
Como se ve, es muy similar al anterior pero, no es una lista HTML sino que se escriben una al lado de la otra así que eliminamos el carácter separador (la coma) y, nuevamente, reemplazamos el texto <data:label.name/> por la imagen:
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>

En este caso, podemos crear una variante, utilizar una imagen personalizada y además, el texto, uno al lado del otro:
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/> <data:label.name/>

107 comentarios:

Marcos Horro Varela  

Tiene muy buena pinta , pero tendríamos que hacer este paso con cada imagen o habría algún otro método en un sólo paso?

Saludos

Responder
JMiur  

Las imágenes habrá que crearlas una por una y alojarlas pero el código es único, se pone tal cual está, en un bucle que lee las etiquetas, arma una dirección url y la muestra.

No tengo muy claro a que te refieres con eso de los pasos.

Responder
sølrαc  

Muy bueno y gracias por este 'hack' JMiur.

Se me ocurre un pequeño cambio, ¿se puede incluir el 'title' en la imagen con el texto de la etiqueta? .. algo así como:
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"' title='"["+data:label.name+"]"'/>

Otra duda, ¿se puede controlar en el caso de no poder cargar la imagen (que no existe, servicio hosting caído, etc.) que aparezca el texto de la etiqueta?

Responder
JMiur  

Solrac:

Como siempre, muy buenas aclaraciones :)

Creo que debería ser:
expr:title='"["+data:label.name+"]"'
pero sería cuestión de probar.

O cualquier combinación:
expr:title='"Enlace a " + data:label.name'

Lo del texto alternativo, en teoría debería funcionar si hacemos lo mismo pero con el atributo ALT ya que este es el texto ALTernativo que se muestra cuando un objeto no es encontrado:

expr:alt='data:label.name'

También es cuestión de probar poniendo una etiqueta que no tenga la imagen creada.

Responder
sølrαc  

opps ... ya no me acordaba del ALT :(



otra cosa ... sigo trabajando con el JSON para recuperar los títulos de los post anterior y posterior ... He conseguido que me funcione aunque debo depurarlo. Lo malo es que a medida que aumenten el número de post aumentará el tiempo de búsqueda.

Responder
Gem@  

Muy bueno como siempre ;) buscaré iconos para probar.
(Llevo dos días que me da la sensación que Google Pages se cae ¿has notado algo?)

Responder
Gem@  

Solucionado, me he excedido en el ancho de banda :(

Responder
Marcos Horro Varela  

Perdón JMiur , me confundí al formular mi pregunta , resuelto. ¡Gracias , ahora a intentar probar el hack con éxito!

Responder
Marcos Horro Varela  

Jejeje...muy sencillo y muy bien explicado! Prueba superada , compruébalo aquí jeje

Saludos

Responder
JMiur  

Solarc:
Eso nos pasa a todos :D

Gem@:
No he notado nada y eso del límite del ancho de banda es algo preocupante ¿Tienes idea de cómo puede hacerse para averiguar cuál es y cuánto estamos usando?

Markos:
Acabo de verlo y parece funcionar correctamente :D

Responder
Anónimo  

.. hacer este tipo de cosas en Blogger es una proeza ... es increible lo que logras sin documentacion alguna // la verdad si no fuera por PHP (que como sabes estoy aprendiendo) no podria hacer nada para la web... como mucho cambiar el aspecto de un blog modificando los CSS // FELICITACIONES JMIUR

Responder
JMiur  

Las limitaciones son una desventaja de la cual hay que sacar provecho como se pueda :D

Responder
Gem@  

Olvidé comentarte aquí que mi prueba fue superada.
Para el ejemplo añadí los iconos en el footer de las entradas con tus recomendaciones siempre acertadas.
Gracias de nuevo :)

Responder
JMiur  

Vi tu post publicado así que ya me había enterado que todo había quedado resuelto :)

Responder
Sebastian  

Hola!! como andas jmiur, me encanta tu blog, pero sinceramente no entiendo mucho como hacer para que me funcione este truco, ya que me encantaria hacerlo en mi blog, de hace mucho me vengo preguntando como hacer para poner una imagen diferente para cada etiqueta, estaria bueno, si podes, que me lo explicaras, pero por msn ya que te entenderia mejor, yo por las dudas te dejo mi msn y mi direccion de blog, MSN: sebastian_alejandro1992@hotmail.com

DIRECCION DE MI BLOG: http://sarguet.blogspot.com

espero que me lo puedas explicar! me sera de mucha utilidad, gracias de antemano, un saludo

Responder
JMiur  

Seba, envíame un mail y me explicas qué quieres hacer y donde ponerlo :)

vagabundia@gmail.com

Responder
thecatnegro  

bueno con practica se puede hacer te felicito por el manual esta fino tengo blogger espero ponerlo en practica en un futuro

Responder
Rociobrujita  

Gracias
Ahora una cosa a mi me habian dicho q para cosa debia creear un blog nuevo
POR EJEMPLO: Postres(un blog) y mostrar. una tarta
Carnes(otro blog) y mostrar un fileteç
¿me entiendes?? con esto q tu dices¿tengo q tener un blog de cada dosa o me vale solo uno??(ya tengo casi todos,jajaj
Un besin

Responder
JMiur  

Lo explicado acá es para colocar en un blog, no hace falta tener varios. No sé cómo es la idea general que tienes así que no puedo aclarar nada más. Puede ser que lo que te hayan dicho tenga que ver con alguna otra cosa.

Responder
Rociobrujita  

Vale gracias
Un saludo

Responder
Unknown  

Gracias por el hack, era algo que buscaba =).
actualmente configuro mi blog, y esto me va a servir. Saludos =).

Responder
Designerd  

No se k me salio mal pero las imagenes no me aparecen.
Me salen unos cuadros con una cruz sin embargo les doy click y si me manda al link de la etiketa

Responder
JMiur  

Eso significa que la dirección de las imágenes es errónea. Revisa eso.

Responder
Anónimo  

^^ Hora de quitar Hostfile y Google Pages de la lista (checa el post)...

Y tan "buenos" que solían ser.

Responder
JMiur  

NOOOO!!!!!!!!! Me niego, me niego, me miego :D

Demasiado trabajo quitar esas referencias de TODOS los posts. Ya bastante tengo con la mudanza forzada :)

Responder
Anónimo  

xD!!!!

Sí, sí, creo que ya ha sido suficiente.

Tanto, tanto ansío que Blogger escuche!

Responder
Designerd  

Tenias razon la direccion no era correcta.

Geacias por el truco. Saludos.

Responder
Gem@  

Como para que ahora también se quedara colgado Imageshack uffffffffffff

Responder
JMiur  

El asunto se está poniendo pesado, por cierto ;)

Responder
ViNeOn DrEaMs  

Disculpa, este truco es muy bueno pero tengo un problema. Tengo muchas etiquetas y si aplico este truco tendre muchas imagenes k estaran en forma de lista muy larga.
Existe una manera de acomodar las etiquetas de manera k no aparesca una lista interminable de imagenes?

Responder
JMiur  

N ose me ocurre ninguna forma sencilla de hacerlo.

Responder
-¦-= Shadow†Sneak =-¦-  

Disculpa si sale doble posteo, es que lo hice en las 2 ventanas , me urge el tema..XD.. bueno si sale borras 1 y ya.je..

Hola, antes que nada decir que me e encontrado con un excelente blog con info muy necesaria y buena, bueno mi problema espero me ayudes ya que e buscado por todas partes este hack y al fina di con el , e seguido todos los pasos y no se que esta saliendo mal al final las imágenes me salen como si no estuvieran o fueron movidas, habrá faltado algún código?, seguí todos los pasos y no logro que me salga la imagen que aloje , la otra pregunta, no entendí como agregar imágenes a las diferentes etiquetas, dentro del "gadget" que cree tengo si diferentes secciones , lo que no entiendo es como agregar 5 diferentes imágenes a las 5 diferentes etiquetas como se muestra en la imagen que dejaste , ojala me puedas ayudar ya que soy solo un novice en esto de los códigos, estoy arreglando el blog para muestras de trabajo y esta aplicación me serviría de mucho , tanto para estética y funcionalidad, ojala me ayudes.

Elcódigo que sale en mi plantilla, me fije que hay códigos que no salen en tu muestra , supongo que es por plantilla diferente eso creo.

Pdt: de nuevo, muy buen blog. ||

saludos.

Responder
JMiur  

Así como lo explicas no comprendo muy bien. Necesitaría ver lo que has hecho aunque no funcione porque sin duda, se trata de algún error de sintaxis pero no sabría decirte donde.

Responder
-¦-= Shadow†Sneak =-¦-  

Te podría mandar la plantilla para que vieras cual es el problema y vieras esos códigos que salen demás?

saludos.

Responder
-¦-= Shadow†Sneak =-¦-  

O mejor dicho solo la parte que necesito modificar?

Responder
JMiur  

Puedes hacerlo aunque n osé si podré ver el problema, de todas maneras, lo intento.

Responder
-¦-= Shadow†Sneak =-¦-  

OK.. fracias por responde se agradece tu amabilidad y tiempo para responder..

ahí la mando, dentro del txt explico el problema , para que vayas al grano.

gracias y saludos.

Responder
JMiur  

OK. Ta lo recibí. Déjame ver si entiendo el problema y te contesto.

Responder
-¦-= Shadow†Sneak =-¦-  

Hola, gracias por responder pero, entonces cual seria la solución? quede mas confundido con lo que mandaste..XD.. todas las fotos que dejaste están como link muerto, =/...

saludos.

Responder
-¦-= Shadow†Sneak =-¦-  

Estuve leyendo y entendiendo mejor lo que mandaste , lo que me recomiendas es cambiar los títulos ? ejemplo 1,2,3, etc.. para luego reemplazarlos? por imágenes ya que total en las imágenes colocare a la sección que se refiere?

saludos.

Responder
-¦-= Shadow†Sneak =-¦-  

Sabes que al dejar localizado el link con la imagen y separando el .png y agregando otro "Fanart" como dejaste en el e-mail no lo toma ..e tratado como lo dejaste en el mensaje y no pasa nada no se que hacer no se me ocurre nada , aparte que no manejo la nada de códigos lo hago solo por intuición y por experiencia que vas tomando con el tiempo tanto copy paste.. el link es este así lo reconoce perfecto pero con las separaciones que me dejas no lo tomara nunca.

http://i649.photobucket.com/albums/uu211/Shadow_Sneak/Fanart.png

Responder
JMiur  

Yo no envié imágenes. Sólo te enumeré donde deberian estar y cuales deberían ser los nombres de esos archivos porque esa URL es la que construye el código y, como no hay ninguno, simplemente no muestra nada así que lo primero es colocar las imágenes.

Si el servidor y la carpeta donde esta la imagen son estos:
http://i649.photobucket.com/albums/uu211/Shadow_Sneak/
y el archivo se llama Fanart al igual que la etiqueta y tiene extensión .png, este código:

<img expr:src='&quot;http://i649.photobucket.com/albums/uu211/Shadow_Sneak/&quot; + data:label.name + &quot;.png&quot;'/>

mostrará esa imagen.

Si la etiqueta fuera CUALQUIERCOSA y hubiera un PNG alojado en la misma carpeta y que tuviera por nombre CUALQUIERCOSA.png, el mismo código mostraría esa segunda imagen. Porque lo que hace es eso, busca en esa carpeta un archivo que se llame igual que la etiqueta.

Así que, cada etiqueta debe tener un archivo con el mismo nombre de la etiqueta; todos deben estar alojados en el mismo lugar y todos deben tener la misma extensión.

En esta entrada de un blog de pruebas está colocado ese código con esa etiqueta y esa imagen.

Responder
-¦-= Shadow†Sneak =-¦-  

Gracias man por tu gran ayuda, no me la puede ganar, gracias por la paciencia..XD... te comento luego si me funciona, no me la va a ganar!!!..XD

saludos y gracias..

Responder
-¦-= Shadow†Sneak =-¦-  

Hola, de nuevo yo :D.. sabes por mas que trato no me sale nada.. me rindo!!.. disculpa pero te mande un e-mail , pidiendo la salvación..jeje.. ojala me ayudes.. con lo que dice.

saludos y disculpas.

Responder
-¦-= Shadow†Sneak =-¦-  

Gracias por responder, algunas cosas no las respondiste nunca XD, "era lo mas importante", pero bueno , tampoco sirvió lo que mandaste esta es la 1era vez que no me funciona un código, en una de esas sera por la plantilla, la que tengo es la "mínima", buscare por otras partes haber si esta bien todo para que funcione..

saludos.

Responder
-¦-= Shadow†Sneak =-¦-  

Yeah!! al fin lo logre..XD.. parece que tanto subrayado me dejo medio perdido, con lo último que enviaste me quedo mas claro, la otra vez colocaste unas palabras demás y por eso no salia, ahora si dejaste el preciso , es muy simple..XD.. al fin, este sera mi último posteo en este tema...XD ..gracias..

saludos.

PDT: elimine un post porque me faltaron unas comas..jeje..

Responder
Hizu  

Genial, pero necesito ubicarlo en el sidebar .__.
buena explicación!
Saludos!

Responder
Bibliotecario  

Hola, el alt para que se vea el nombre de la etiqueta por si la imagen está mala no me funciona. Lo puse así: < img expr:src='"http://i830.photobucket.com/albums/zz221/pablongonius/lahemeroteca/" + data:label.name + ".jpg"' expr:alt='data:label.name'/>

Me salen las imágenes correctamente, pero las que no tienen imagen se ve "this image must have been mooved or deleted" o algo así. Tal vez tenga qu ever con photobucket. Auxilio

Responder
JMiur  

Tanto:
expr:alt='data:label.name'
como
expr:title='data:label.name'
son correctas y funcionarán sin problemas pero, en este caso particular, la imagen sí existe, Photobucket coloca una por defecto que es esa que ves con el mensaje. Lo mismo ocurre con otros servicios como ImageShack.

Responder
Unknown  

HOla que tal quiero poner las una imagen que al pasar el cursor cambie .pero tambienme pregunto si es posible poner una imagen para cada etiqueta.Lamentablemente antes de todo esto me gustaria que me ayudaras pues me metia a mi edicion de html y expandi la plantilla y no sale la label como la que tienes ahi como ejemplo porque no me aparece:div class='widget-content' y me aparece esto:div expr:class='"widget-content " + data:display + "-label-widget-content"'
Entre otras cosas ,pero es una paradoja ,porque esto solo aparece en los labels de etiqueta ,pero en los labels de imagenes o texto si aparece ayudame porfavor .porque me aparecen cosas distintas?Gracias.

Responder
JMiur  

El código de las etiquetas de Blogger ha cambiado ya que ahora también se incluye la posibilidad de nostrarlas como una nube. Vas a tener que ir viendo có,o compatibilizar esto, que ya es viejo, con el nuevo modelo.

En el gadget , lo que importa es esta parte:

<b:if cond='data:display == &quot;list&quot;'>
....................
<b:else/>

Y el enlace, ahora dice así:

&lta expr:href='data:label.url + &quot;?max-results=5&quot;' rel='nofollow'&gt&ltdata:label.name/&gt&lt/a&gt

Responder
Arineko Joong  

hola JMiur no entendi muy bien lo de los codigos :( busque en plantilla html active la opcion expandir plantillas de artilugios, llegue a encontrar el codigo que señalas arriba pero no es igual al que tengo en mi blog tiene otros codigos aparte intente cambiarlos y puse el url de la imagen con todo y su extension pero cuando le puse vista previa no salia nada ni las etiquetas podrias ayudarme por favor

no puedo poner los codigos aqui para enseñarte me sale error no se si podria enviartelos por documento de texto a tu correo

gracias

saludos

Responder
JMiur  

Envíalos por mail y explícame un poc que has hecho y en lo posible, donde tienes un ejemplo que pueda verse.

Responder
Arineko Joong  

gracias por tomarte el tiempo en leer mi comentario y por tratar de ayudarme ya te envie los codigos al correo.

saludos y gracias denuevo

Responder
El ChinoLR  

muy lindo pero no me animo a hacerlo me gustaria qe me expliques un poquito mas je te dejo mi mail si me podrias ayudar me interera lo que hisiste el truco -> comparte-en-lrc@hotmail.com gracias espero tus ayuditas para hacerlo mi blog es este www.lariojacuartetera.blogspot.com

Responder
Otoko  

hola a todos a mi me funciona correctamente, pero tengo un error ademas de ponerle las etiquetas con imagenes pues he puesto mas etiquetas pero ellas no tienen imagen y cuando lo cargo en crhomer o en IE carga como imagemn fallida pues alguna solucion para ese problema! plss es urgente ..

Responder
JMiur  

Está pensado para que toda etiqueta esté asociada a una imagen; caso contrario, deberíau crearse un nuevo código aunque no se cómo.

Responder
Bloodrose  

Woooww muy bueno iva genial perooo tengo una duda que me traba que es la extensión del tipo de archivo? perdon por la ignorancia

Responder
Bloodrose  

Na olvidate de mi pregunta, no me sale.... Me frustre, que inutil lpm!!!

Responder
JMiur  

La extensión son las tres últimas letras e identifican el tipo de archivo:
nombre.jpg
nombre.png
nombre.gif
en esos casos, jpg, png y gif son las extensiones de los archivos.

Responder
Cartoncita Rosa  

Después de varios intentos, ya pude lograrlo :D pero ahora solo tengo una duda, la mayoría de mis etiquetas en el blog llevan acento y no me gustaría quitárselos ya que tengo una nube de etiquetas que muestran los temas de mi blog y se verían mal sin acentos, como Administración, pero para subir la imagen a Photobucket a pesar de que mi imagen se llama Administración al igual que mi etiqueta, cuando copio su dirección dice Administracin, es decir omite la letra "o", por lo que en las entradas que tienen esa etiqueta no se muestra la imagen, ¿habría alguna solución que no sea tener que prescindir de los acentos en mis etiquetas? :(

Creo que no, pero más vale preguntar :D

Besos!

Responder
JMiur  

Pués no se me ocurre nada, ahí te encuentras con una limitación que es común a toda la web ya que acentos y otros caracteres no son aceptados como parte de las direcciones URL.

Responder
Cartoncita Rosa  

Gracias por la respuesta, he decidido eliminar los acentos para esas etiquetas con imagen :D

Otra consulta, ¿es posible poner el atributo Title para que al pasar el cursor por las imagenes de etiquetas se vea el nombre? Ya que no me gusta como se ven con el nombre a un lado, por lo que he dejado las puras imagenes :)

Besos!

Responder
JMiur  

Me parece una decisión razonable. Las etiquetas son URLs a sí que es mejor evitar esos caracteres.

Puede ponerle title sin problema; simplemente, agrégalo por ejemplo, en el enlace; en lugar de:

<a expr:href='data:label.url'>

coloca:

<a expr:href='data:label.url' expr:title='data:label.name'>

Responder
Kruspex  

Muchas gracias por tu blog, me está siendo de gran ayuda
Saludos!!

Responder
kaitokou (≧∀≦) kyo kusanagi &amp  

tengo una duda, por ejemplo tu cambiaste solo 2 codigos data:label.name/ por la imagen, mi duda es que si por cada etiqueta existe un codigo del mismo tipo, porque yo tengo 9 etiquetas en mi lista, y en la edicion HTML solo me muestra 4 codigos asi, y mi otra duda es que cuando modificaste el ul y el li donde colocaste "lista de etiquetas" tenemos que poner el nombre de todas nuestras etiquetas en lista, por ejemplo: ul class='MUSICA
IMAGENES
VIDEOS
NOTICIAS
DESCARGAS'
o en que tipo de formtao habria que colocarlo o simplemente con escribir "misetiquetas"? perdon si mis dudas son algo bobas, soy nuevo aun, bueno, te agradezco de antemano, y si pudieras hacer un video tutorial para los que no entendemos muy facilmente seria estupendo

Responder
JMiur  

data:label.name está ne varios lados, normalmente en dos: debajo de las entradas y en el elemento Etiquetas si este está agregado.

Es posible que haya más etiquetas porque con el tiempo, Blogger ha ido modificando este elemento y, por ejemplo, ahora incluye la posibilidad de colocarlo como nube.

ul.listaetiquetas es genérico, es decir, no hace falta poner el nombre de cada una; sólo es una clase CSS para establecer las propiedades de estilo con que severam ensas imágenes y/o textos.

El nombre de la etiqueta se toma de modo automático con:

&t;img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"' />

No sé si eso aclara algo.

Responder
Elena Mellado  

Hola!!!! Siempre quise colocar imagenes en lugar de las etiquetas normales que vienen. No entiendo mucho de programacion html e intento seguir los pasos pero nada no hay manera.

Responder
JMiur  

Tendría que saber qé has hecho o un ejemplo concreto para intentar encontrar el problema.

Responder
L  

Hola JMiur gracias x el hack
Lo quiero usar pero tengo una duda...
pasa q tambien quiero usar el http://vagabundia.blogspot.com/2011/05/entradas-relacionadas-con-slider.html
y como este funciona con las etiquetas, en mis posts usaria varias etiqtas algo largas a las q no pondre imagenes, asi que..
-como seria para que las etqtas no se ordenen alfabeticamente
Gracias de antemano :D

Responder
JMiur  

Tendrías que pensarlo porque Blogger las cooloca ordenadas alfabéticamente o por frecuencia. Buscar la forma de condicionarlas una por una. La verdad, no sé, es un tema muy específico como para responder.

Responder
German Long  

hola, mira logré asociar una imagen a una etiqueta, pero no logro hacerlo con una segunda etiqueta, es decir, en todas las etiquetas me sale la misma imagen (la primera que hice)... en que línea del código debe ir la 2º imagen??? debe ir 2 veces o solo una??
este es el blog, si miras a la derecha verás lo que quiero decir, gracias....

Responder
German Long  

perdón, no dejé el blog, es este: www.denasdeao.com

Responder
JMiur  

El problema, básicamente, es por lo que acalara esta misma entrada:

Para resolver el tema debemos partir de una limitación: dónde alojar las imágenes a utilizar. Si las subimos a Blogger, las direcciones URL que tendremos serán, como mínimo, estrafalarias; no tenemos forma de deducirlas, cada una es diferente y NECESITAMOS SABER dónde están las imágenes, lograr que la dirección URL sea algo fijo donde sólo cambie el nombre del archivo y no el resto del dominio ni el directorio donde están guardadas.

Blogegr o Picasa no poseen direcciones URL que puedan ser modificadas de este modo así que, en tu ejemplo:

https://lh5.googleusercontent.com/-PldMf1HW224/Tkmex2wI4aI/AAAAAAAA5cU/fl1TSjhHU2I/Portugal.pngItalia.png
https://lh5.googleusercontent.com/-PldMf1HW224/Tkmex2wI4aI/AAAAAAAA5cU/fl1TSjhHU2I/Portugal.pngPortugal.png

son la misma:
https://lh5.googleusercontent.com/-PldMf1HW224/Tkmex2wI4aI/AAAAAAAA5cU/fl1TSjhHU2I/Portugal.png

aún cuando escribiera:
https://lh5.googleusercontent.com/-PldMf1HW224/Tkmex2wI4aI/AAAAAAAA5cU/fl1TSjhHU2I/Portugal.pngesta_es_otra_imagen

seguiría viendo la misma.

Debes usar un servidor que posea direcciones URL de otro tipo donde lo único que cambie sea el nombre del archivo.

Responder
German Long  

hola JMiur, gracias por la respuesta....
mira, ahora cambié el servidos y alojé las imágenes en photobucket, y ahora ni siquiera me muestra ninguna imagen, me dice que el archivo ha sido borrado o movido, como si estuviera mal la ruta, si embargo si pego la direccion en la barra de direcciones de un navegador, la imagen si que existe, o sea la dirección está bien, no sé cual es el problema...
esta es la dirección:
http://i1236.photobucket.com/albums/ff448/germanlong/flags/Portugal.png, pero en el blog no me la muestra, a pesar que la pegué exactamente donde antes estaba la otra que sí me mostraba....
y lo segundo, donde exactamente debo pegar el codigo de la nueva bandera?
o sea como quedaría el código si le quiero agregar esta imagen: http://www.i1236.photobucket.com/albums/ff448/germanlong/flags/Italia.png
gracias...

Responder
German Long  

no sé que hago mal, pero si cambio el host de imágenes, directamente no me la muestra, ni alojándola en google sites, ni en photobucket, ni en fileden... en esos tres hostings lo único que cambia es el nombre del archivo, como vos decis, pero ya probé con los tres y no me muestra la imagen en el blog, me sale un cuadradito (si mirás el blog vas a ver)....
solamente me muestra la imagen que quiero cuando la linkeo desde un album web de picasa, pero ya me has dicho que "debo usar un servidor que posea direcciones URL de otro tipo donde lo único que cambie sea el nombre del archivo" para que funcione este código, así que ya no sé que hacer....
y llegado el caso de poder ver la imagen con alguno de estos hostings, tampoco sé en qué línea del código debo agregar los nuevos links de las etiquetas que vaya agregando, o sea después de que va?? donde empieza y termina un "link" (por ejemplo el de Portugal que tengo agregado) y no sé si el otro debería pegarlo inmediatamente después, o si va dos veces el link, no me termino de aclarar, gracias....

Responder
JMiur  

Por lo que se ve, las imágenes no están en Photobucket sino en Google Sites. Como se trata de un dominio propio, no sé si serán accesibles, de todos modos, al margen de eso, hay un error en lo que agregas a la plantilla porque, las imágenes a mostrar tienen este tipo de URLs:

https://sites.google.com/site/pruebagerlong/archivos/Portugal.pngItalia.png
https://sites.google.com/site/pruebagerlong/archivos/Portugal.pngPortugal.png

Eso es porque esta parte está mal configurada:

<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>

Si es Google Sites debería ser algo así:

<img expr:src='&quot;https://sites.google.com/site/pruebagerlong/archivos/&quot; + data:label.name + &quot;.png&quot;'/>

Si es Photobucket debería ser algo así:

<img expr:src='&quot;http://www.i1236.photobucket.com/albums/ff448/germanlong/flags/&quot; + data:label.name + &quot;.png&quot;'/>

Responder
Unknown  

Esta entrada es justo lo que necesitaba, pero me gustaría saber si es posible poner en el Sidebar sólo la etiqueta con imagen que se utilizan en el post y no en el mismo post, por ejemplo si el post lo etiqueto como "Comidas" entonces en el Sidebar que salga algo como: "Estas en la sección de Comidas, gracias por visitarnos" y la imagen de la etiqueta al lado. Y que cambie la palabra comidas e imagen al cambiar de etiqueta.

Intenté lo que pusiste en el blog pero en el sidebar sólo sale la lista de etiquetas con sus imágenes, yo quiero que salga sólo la etiqueta que se está usando + la imagen y espero que sea posible :$.
Gracias.

Responder
German Long  

ya pude, gracias JMiur...

Responder
JMiur  

Beliacuario
Para eso, debes usar JavaScript. Fíjate en esta entrada que habla de algo similar.

Me alegra, German Long :D

Responder
Unknown  

Muchas gracias JMiur es justo lo que necesitaba :D

Responder
German Long  

hola JMiur, con respecto a esto, ahora tengo otra consulta para eso...
en mi blog de viajes, tengo que etiquetar Reino Unido, o sea dos palabras separadas, y al publicar la entrada, no me muestra la imagen....
la subí con el nombre Reino Unido al mismo google sites donde tengo las otras imágenes, pero el problema es que al subirla me suprime el espacio intermedio, entonces no me muestra la imagen en el blog, porque obviamente no encuentra la ruta...
de momento lo resolví poniendo un guion bajo en la etiqueta y en el archivo, pero no me gusta para nada como queda, y veo que en el ejemplo que pusiste pones la etiqueta "elefantes rosados", y me gustaría saber como hacer para que lea bien el código...
supongo que tengo que modificar algo del código, te agradecería si me podes explicar que parte del codigo modificar y cómo hacerlo para que esto quede bien....
gracias...

Responder
JMiur  

Si Google Sites elimina el espacio. Lo máximo que puedes hacer es probar cambiando ese espacio por %20 que es la forma en que se codifican als URLs.
reino%20unido.jpg

Si eso no funciona, no tienes alternativas razonables ya que es el mismo servicio el que no te permite hacerlo.

Responder
Carlos Martínez  

Hola..... Bueno, la cosa era para ver si podia ayudar un poco con esto no, si no disponemos de un servidor propio, lo justo seria que utilizaramos una condicional....

Algo como esto:

<b:if cond='data:blog.url == data:label.url'>
<b:if cond='data:label.name == "etiqueta con espacios"'>
<img expr:src='&quot;https://sites.google.com/site/MISITIO/etiquetaconespacios.png&quot;'/>
<b:else/>
<img expr:src='&quot;https://sites.google.com/site/MISITIO/&quot; + data:label.name + &quot;.png&quot;'/>
</b:if>
<b:else/>
<a expr:href='data:label.url'>
<b:if cond='data:label.name == "etiqueta con espacios"'>
<img expr:src='&quot;https://sites.google.com/site/MISITIO/etiquetaconespacios.png&quot;'/>
<b:else/>
<img expr:src='&quot;https://sites.google.com/site/MISITIO/&quot; + data:label.name + &quot;.png&quot;'/>
</b:if>
</a>
</b:if>

Es lo único que se me ocurre.... De momentos he probado y va bien.... Saludos!!

Responder
DzignsWeb  

jejej yo me la coplique un poco xd solo use css para mostrar etiquetas

Responder
colmilloBlanco  

hola JMiur. espero que me puedas ayudar. tengo un problema con mis imagenes de mi blog. a principios cuando subia imagenes eran normales. pero ahora como que se han acortado y son muy pequeñas que algunas ya casi ni se alcanzan a ver. no se que codigo modificar espero tu ayuda. gracias .ahi te dejo mi url.
http://www.obraspoemas.com

Responder
JMiur  

Es que en tu blog has agregado esta regla:

.post-body img {
max-width: 10% !important;
}

y eso hace que todas las imágenes se vean con un ancho máximo del 10% de su valor real. Quita esa regla y asunto solucionado.

Responder
colmilloBlanco  

gracias JMiur. estuvo muy bueno. todo solucionado muchas gracias.
hay mucho por aprender. y buen lugar para hacerlo
saludos

Responder
JMiur  

Perfecto, Héctor; me alegra que se haya solucionado.

Responder
Louie  

por ejemplo si pongo varias etiquetas... pero sólo quiero que se muestre una?
qué debo hacer??

lo he hecho pero a las que no les he puesto imagen me salen con un cuadro de que allí debe ir una imagen pero el enlace roto o algo así

no se si me explico :s gracias

Responder
JMiur  

Coloca una imagen en blanco; algun gif o png transparente de 1pixel x 1pixel

Responder
Unknown  

JMiur, disculpa mi ignorancia, y por cambiar de tema, pero veo algo en tu blog que me llama mucho la atención.
Hablo de esa ''minilupa'' que por ej. aparece en ''Contacto''.
y se habre una ventana aparte.
Tienes algún tuto, que diga como aplicarlo.
Saludos y ¡Excelente blog!

Responder
JMiur  

Si te refieres al cursor que se ve en el enlace, eso puede personalizarse con CSS. Fíjate en estas dos entradas: 1 y 2

Responder
Sermartin  

Te escribo por aqui jmiur, estaria bueno probarlo, aunque antes quiciera saber si es posible que se muestren (preferentemente solo en pag principal) solo determinadas etiquetas a pesar de que esten agregadas mas.
Saludos !

JMiur  

Poder se puede pero, sería engorroso de armar y no podrías controlar la cantidad de entradas por página.

Sermartin  

repente me explique mal jmiur, no me referia a solo mostrar dterminados post con X etiquetas, abajo de cada post aparecen las etiquetas, lo que decia es que no aparezcan todas si no que solo las elejia.
Supongo que sera con alguna propiedad de ocultar, peri no se, por eso se lo consultaba jmiur,
Muchas gracias.

JMiur  

No sé que dice tu plantilla pero, las etiquetas debajo de las entradas se colocan en un bucle de este tipo:

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>

y filtrar eso también es engorroso ya que Blogger no dispone de condicionales múltiples así que deberías crear una condición que verifique cada nombre de etiqueta y la muestre o no la muestre; si se trata de no mostrar UNA, es sencillo si son más, se complica.

Sermartin  

Si usamos
<img expr:src='"http://nuestro_servidor/"...
para sustituir el texto por una imagen, es posible darle a cada imagen una propiedad tipo b:if cond='data:blog.url == data:blog.homepageUrl'
o similar?

JMiur  

No entiendo. Cualquier etiqueta puede ser condicionada siempre que se tenga en cuenta que ua na condición tiene dos posibilidades, o es cierta o es falsa.

Sermartin  

O sea, le agrego a un post la etiqueta Casa, Casa1 y Casa2.
Aplicarle la sustitucion por imagenes, luego decia de darle alguna propiedad de que la imagen "Casa" se muestre sea visible en el home y en post, mientras que "Casa1" y "Casa2" la propiedad para que solo se vean en post.
Aqui como seria mi idea, que en el home solo se vean las etiquetas "generales".
Aparte, no se si conocias estos experimentos jmir, epro si no repente sean util para compartir https://developer.mozilla.org/es/demos/.

JMiur  

Eso es lo que digo que será engorroso ya que deberás escribir cada condición y decirle que haga algo con todas sus variantes:;

<b:if cond='data:blog.homepageUrl != data:blog.url'>
es el home
<b:if cond='data:label.name == "Casa"'>
es la etiqueta Casa y la muestro
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:else>
si no es al etiqueta Casa ¿que hago? ..........
debo decidir que hacer con cada etiqueta
</b:if>
<b:else>
<b:if cond='data:blog.pageType == "item"'>
es un post; de nuevo, tengo que verificar cada etiqueta y colocar la condición
<b:else>
no es el home ni es una entrada
lo mismo, debo establecer las condiciones para cada una de las etiquetas
</b:if>
</b:if>

Responder
Sermartin  

gracias jmiur, y por ejemplo en este blog que aparece debajo una img cuando el post(peli) es en ingles o en latino usa esa sistema o es otro.

JMiur  

Eso no es algo que sea visible online, sólo puede verse en la plantilla misma.

Responder
Victor Brooks  
Este comentario ha sido eliminado por el autor.
JMiur  

No entiendo a que te refieres con lo de segunda etiqueta. Lo que indica esta entrada es como poner una imagen a cada una de las etiquetas y esta imagen es, básicamente, el nombre de cada etiqueta.

Responder
Anónimo  

Hola JMiur, gracias por compartir tantos conocimientos

Estoy que casi lo tengo, pero me aparece una duda y es que en Photobucket el nombre que se genera al subir las fotos no sé cómo controlarlo, pq al final resulta ser un nombre con muchos caracteres al final, del estilo "http://i1273.photobucket.com/albums/y413/inakibarettini/Nepal/P1000501_zps0d4172e8.jpg y claro, yo no quiero darle ese nombre tan aleatorio a mis etiquetas. Sabes si existe alguna manera de cambiar el nombre en Photbucket? Lo he mirado pero no he sabido encontrarlo
Gracias por tu ayuda
Un saludo

JMiur  

Hace mucho que no uso Photobucket , desconozco si ha habido cambios en el servicio.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR