Páginas

▼

01 febrero 2010

Blogger: Sustituir el nombre de las etiquetas por imagenes

Si te molesta que en cada entrada se muestren las etiquetas en forma de texto, por estética o por lo que quieras, sencillamente podrías hacer que cada etiqueta, en vez de mostrar su nombre en texto, mostrara una imagen relacionada con ella.

Reemplazar etiquetas por imagenes

Es decir, si tienes de etiqueta algo así como "noticias", en vez de que tu entrada muestre "noticias" en la parte de las etiquetas muestre un periódico, diaro, boletin. Como le digan en tu país. En el siguiente enlace puedes ver un demo

En fin, ya entrados en el tema. lo que tenemos que hacer para mostrar las etiquetas con forma de imagen:

[1] Entrar en Diseño<Edicion HTML>Expandir plantillas de artilugios

[2] Despues busca "post-labels" con Ctrl + F

[3] Hasta encontrar algo como lo siguiente: 
<span class='post-labels'>
  <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>
</span>
 Esta es la parte que muestra las etiquetas de cada entrada. Así que deberías tener algo similar
[4] Ahora haremos las modificaciones:
<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'>
      <b:if cond='data:label.name == "{ETIQUETA}"'>
        <img src='{URL DE IMAGEN}' expr:title='data:label.name' expr:alt='data:label.name'/>
      </b:if>
      </a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
  </b:if>
</span>
 Puedes observar que sustituimos el código en color verde del paso [3], que mostraba el nombre de la etiqueta, por un condicional y la imagen.

La parte en color:
Azul: Debe ser sustituida por la url de la imagen
Rojo: El nombre de la etiqueta


[5] Para mas etiquetas solo debes agregar varias veces el código en color verde del paso [4], de la siguiente forma: 
<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'>
      <b:if cond='data:label.name == "{ETIQUETA1}"'>
        <img src='{URL DE IMAGEN1}' expr:title='data:label.name' expr:alt='data:label.name'/>
      </b:if>
      <b:if cond='data:label.name == "{ETIQUETA2}"'>
        <img src='{URL DE IMAGEN2}' expr:title='data:label.name' expr:alt='data:label.name'/>
      </b:if>
      <b:if cond='data:label.name == "{ETIQUETA3}"'>
        <img src='{URL DE IMAGEN3}' expr:title='data:label.name' expr:alt='data:label.name'/>
      </b:if>
      <b:if cond='data:label.name == "{ETIQUETA4}"'>
        <img src='{URL DE IMAGEN4}' expr:title='data:label.name' expr:alt='data:label.name'/>
      </b:if>
      </a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
  </b:if>
</span>
 De esta forma si no tienes imagen para una de tus etiquetas, la etiqueta no se mostrara, ni la imagen ni el texto.
[6] Si por el contrario solo quieres sustituir una sola etiqueta por una imagen, agrega el siguiente código en vez de los dos anteriores:

Sustituir una sola etiqueta por una sola imagen

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'>
      <b:if cond='data:label.name == "{ETIQUETA}"'>
        <img src='{URL DE IMAGEN}' expr:title='data:label.name' expr:alt='data:label.name'/>
      <b:else/>
        <data:label.name/>
      </b:if>
      </a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
  </b:if>
</span>

La parte en color:
Azul: Debe ser sustituida por la url de la imagen
Rojo: El nombre de la etiqueta

De esta manera, solo puedes sustituir una etiqueta por una imagen.

Si agregas mas veces el código en verde con diferentes imagenes, apareceran las imagenes con el nombre de la etiqueta por un lado:

Agregando incorrectamente el codigo


Si necesitas personalizar las imagenes, puedes hacerlo con el siguiente selector CSS:
.post-labels img {
  width:50px;
  margin:0px;
  padding:0px;
  border:0px;
  height:50px;
}
a la/s

9 comentarios:

  1. Joaquín2/01/2010 11:12:00 p.m.

    Hola Santy amigo! De nuevo yo por acá, visitando tu blog.

    Este consejo de hoy sin duda hará más colorido y visual el blog. Supongo que habrá que tener cuidado para no recargar mucho el blog de imágenes, para evitar la ralentización de la carga. Pero en muchos casos, valdrá la pena decorar un blog así con las imágenes para etiquetas, gracias por tu regalo de hoy, Santy.

    Consulta: Santy, podrías ponerme un enlace hacia la entrada de tu blog donde enseñes cómo poner la guía de "Estás aquí ahora"? Similar a la que tiene SantyWeb:

    Estas en: Inicio > trucos > Blogger: Sustituir el nombre de las etiquetas por imagenes

    Gracias y hasta pronto, amigo!

    ResponderBorrar
  2. José GDF2/02/2010 04:09:00 a.m.

    Tengo una duda, y no tengo la respuesta porque aún no me he puesto: ¿Si el nombre de la etiqueta contiene espacios entre las palabras, que se pone, el espacio tal cual o el símbolo "%20" que sale en su lugar en la barra de direcciones?

    Otra cosa, hablando de etiquetas. Supongamos que tengo un puñado de etiquetas que me gustaría tener ocultas a pie de post, pero poder usarlas desde el editor de entradas para mi propio uso. ¿Serviría poner esas etiquetas filtradas con tu método, pero sustituir la imagen por un span con el display:none, por ejemplo?

    Si no entiendes mi pregunta, te lo puedo explicar con otras palabras si quieres.

    En todo caso, buen truco.

    ResponderBorrar
  3. Unknown2/02/2010 08:03:00 a.m.

    Arny Joaquín Hola! como estas? espero que bien.

    Todavía no publico acerca de ello. xD, pero lo haré en breve. Solo ten algo de paciencia ;)


    José GDF, que gusto tenerte por aqui de nuevo :P!!

    Las etiquetas se escriben de la misma forma en que lo haces en el editor de entradas, con espacios, el %20 es solo una codificacion que se utiliza solo en las URL.

    Lo de ocultar las etiquetas de un post, estaba apunto de publicar acerca de ello xD. Pero, si puede dar mas resultados relacionados si las utilizas adecuadamente.

    ResponderBorrar
  4. Marvin Rivas2/03/2010 02:01:00 p.m.

    Estimado SaNtY, aqui estoy de nuevo y aver si me puedes hayudar en esto. mira en la entrada que tengo que muestro todos los Archivos del blog, tu sabes que en al aldo sale la cantidad en numeros, pues e querido cambiarle el colo, ya que el quetiene el numero es blanco y no se distingue en el blog, quiero cambiar el color desde la paleta de fuente de colores de plantilla, pero cuando entro a esta no me sale nada. osea mesale en blanco nada de colores. aver si checas aqui para que veas de que te hablo ENLACE Gracias

    ResponderBorrar
  5. ADM2/05/2010 07:31:00 p.m.

    Hola amigo,,,,,disculpa pero no supe donde preguntarte espero no te moleste....me podrías decir que código utilizaste en donde dice "Enzalame" (el código que abre esa ventana)o si tubieras un codigo similar te lo agradeceria......puedes contestarme aqui visito tu pagina casi a diario.....saludos

    ResponderBorrar
  6. Unknown2/06/2010 12:14:00 a.m.

    TkanimeAdm, por supueto, publicare acerca de ello, pero esperam un poco en lo que redacto, y programo la publicación ;)

    Espero que comentes pronto xD!!

    ResponderBorrar
  7. ●๋•╣ҜΞҜΘ╠●๋•2/06/2010 12:11:00 p.m.

    Hola santy tenia otra preguntita...

    Sabes de algun codigo para que los enlaces externos que tengas en el blog se habran en una pestaña aparte (con el objetivo de no perder visitas)

    Verás, yo he usado uno de la página "forobeta" que no está bien del todo pues aveces, los enlaces internos tamién habre otras pestañas, y entonces lo he tenido que eliminar pues era muy molesto.

    no se si sabrás de alguno...

    Un saludo^^

    ResponderBorrar
  8. Unknown2/07/2010 12:33:00 p.m.

    ●๋•╣ҜΞҜΘ╠●๋•, por que no solo les colocas un <a href='' target="_blank"> A tus enlaces externos?</a> de cualquier forma se de uno.

    Dejame solo lo busco, no me acuerdo donde lo deje :\ y lo publico xD!!

    ResponderBorrar
  9. mAY7/26/2015 01:03:00 p.m.

    : )

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.