Poner un ícono en las etiquetas

11 de marzo de 2009 53 comentarios ,
Los íconos tienen dos funciones, que el usuario identifique visualmente un elemento y estética (en este caso estética en nuestro blog). Un ejemplo es el ícono de estrella que aparece en los Temas de la Ciudad. Para añadir un ícono a nuestras etiquetas (labels) hacemos lo siguiente:
  1. Vamos a Diseño > Edición de HTML y marcamos Expandir artilugios.
  2. Buscamos la etiqueta
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

  3. Justo después de ella pegamos lo siguiente:
    <img src='https://lh3.googleusercontent.com/-NFfPLAYNd98/TnIxDElgkDI/AAAAAAAAGKE/AkiIEBmPt0Q/folder.png'/>

  4. Guardamos los cambios y listo.

Lo que está en verde lo pueden cambiar por la URL del ícono que ustedes quieran, yo les he dado este folder de ejemplo

Folder


53 comentarios en:

" Poner un ícono en las etiquetas "

  1. Sabes, no me salio nada,
    O soy muy mala, o no te entendí, si puedes me ayudas.-
    Anne

    ResponderEliminar
  2. Hola Anne,
    No sé de qué modo puedo ponerlo más claro. Si me das unas horas haré otro post con un método más sencillo.
    Saludos.

    ResponderEliminar
  3. Si Funcionó muy bien, gracias buen aporte, probe en muchos lugares pero este es el unico que funciono, me refiero a los codigos, te agradezco!!

    ResponderEliminar
  4. Hola antonio Blog,
    Me da gusto que hayas encontrado aquí la solución.
    Un saludo.

    ResponderEliminar
  5. Hola, desde ya gracias, pero no me andubo.. quise hacerlo con los archobos y no me salio.. me podrias decir como?

    ResponderEliminar
  6. Ya esta, ya solucione mi problema..

    Gracias, mui buen blog

    ResponderEliminar
  7. Hola jPxX,
    Te me adelantaste =P
    Qué bueno que ya pudiste solucionarlo.

    Saludos y gracias por tu visita.

    ResponderEliminar
  8. hola sabes que tengo mi blogger pero en la parte superior q8uiero cambiarle el encabezado y no puedo me puedes ayudar!!!

    ResponderEliminar
  9. Hola ANGELINA,

    ¿En cuál de tus blogs?

    ResponderEliminar
  10. POTRO ME PUEDES DECIR DONDE CONSEGUIR MAS ICONOS
    E BUSCADO POR TODO GOOGLE IMAGENES Y NADA
    BUENO
    ¡SALU2!

    ResponderEliminar
  11. Hola Panfu_Canesi,

    En el siguiente enlace, al final del post encontrarás un enlace de descarga de 1000 íconos, ojalá alguno te sea útil:

    http://ciudadblogger.com/2009/07/decora-los-titulos-de-los-post-con.html

    Saludos.

    ResponderEliminar
  12. potro mira en mi cabecera de mi blog
    me aparece con borde
    ayudame porfa
    http://blogiablogger.blogspot.com
    ayudame porfavor.

    ResponderEliminar
  13. Hola Blogio,

    Ya te he respondido en esta entrada:
    http://ciudadblogger.com/2009/07/decora-los-titulos-de-los-post-con.html

    ResponderEliminar
  14. y como escojo para cada etiqueta un icono diferente?

    ResponderEliminar
  15. No es posible, pero podrías hacerlo dentro de un elemento HTML/Javascript, ahí pon las URLs de tus etiquetas y así de esa forma puedas ponerles por separado un icono diferente.

    ResponderEliminar
  16. Hola Potro ¡gracias! Saliò perfecto este truco,una pregunta: ¿como podrìa agrandar el tamaño de letra de este gadget?
    Saludos.

    ResponderEliminar
  17. Hola Mariangeles,

    Sólo agrega antes de ]]></b:skin> esto:
    #Label1 {
    font-size:18px;
    }

    Ahí puedes cambiar ese 18px por otro tamaño más grande según sea tu gusto.
    Saludos.

    ResponderEliminar
  18. Hecho Potro, Graciasss!!!
    Que tengas un buen dìa
    Saludos!

    ResponderEliminar
  19. Hola Potro,
    Espero te encuentres bien. Queria hacerte una pregunta¿ como hago para cambiar de color es texto del gadget de etiquetas? ,o sea los nombres de las etiquetas?sin que cambien el color del texto de todos los gadgets( solo el de etiquetas, igual que le cambiamos el tamaño, pero ahora el color ,se puede?
    Saludos.

    ResponderEliminar
  20. Hola Mariangeles,

    Así como lo estabas haciendo está bien, sólo que has colocado los códigos encima de otros códigos. Lo tienes de este modo:

    .Header {
    text-align: center;
    #Label1 h2 {
    background:left top;
    color: #FF0000;
    }
    .comment-timestamp {
    display: none;
    visibility: hiden;
    }
    #Attribution1 {display:none; visibility:hidden;}
    }

    Si te fijas tienes mal cerrada la llave } que hace que dé validez a los estilos aplicados. es decir, debía estar después de:
    .Header {
    text-align: center;

    Y lo has colocado hasta al final del código que te he mostrado. Todo eso debe quedar así:

    .Header {
    text-align: center;
    }
    #Label1 h2 {
    background:left top;
    color: #FF0000 !important;
    }
    .comment-timestamp {
    display: none;
    visibility: hiden;
    }
    #Attribution1 {display:none; visibility:hidden;}



    Saludos.

    ResponderEliminar
  21. Hola potro hace dias vi una entrada acerca de poner las etiquetas tipo menu o algo asi, parecido al que tu tienes, pero ya no la encuentro podrias decirme donde esta o que cosas puedo hacer para personalizar las etiquetas, recuerdo que en la entrada tenia que bajar algun programa mas o menos.. gracias por tu ayuda

    ResponderEliminar
  22. No creo que haya alguno donde se tenga que descargar un programa, supongo que te refieres al menú de categorías.
    Sino mira la sección Menús para ver si está ahí lo que buscas.

    ResponderEliminar
  23. Potro esa entrada no es, no quiero un menu;lo que quiero mas o menos es que las etiquetas esten mas personalizadas que parescan un indice pero mucho mas agradable, recuerdo haber visto una entrada en la que mencionabas algo parecido y si habia que descargar algo, por favor si me puedes dejar las entradas que mas se parescan a esto te lo agradecere mucho.

    ResponderEliminar
  24. No recuerdo, pero utiliza el buscador, seguro ahí tendrás más suerte si pones algunas palabras que recuerdes que tiene la entrada.

    ResponderEliminar
  25. esto pone pero en todas las equietas de la etiqueta

    ahi alguna forma de colcoar un icono distinto a las etiqueta que yo quiera

    me explico bien?

    ResponderEliminar
  26. Te explicas bien, pero con el gadget de etiquetas no se puede. Lo que se hace en esos casos es crear un gadget HTML/Javascript y ahí agregar manualmente el código del icono así como la URL de la etiqueta:

    <img src="URL del icono" /> <a href="URL de la etiqueta">Nombre de la etiqueta</a>

    Eso se agrega por cada etiqueta que quieras mostrar en tu gadget.

    ResponderEliminar
    Respuestas
    1. Hola, soy nueva en esto del blog y tus explicaciones me están resultando super útiles. Un millón de gracias.
      En relación a esto que comentas para poner un icono únicamente en una de las etiquetas... dónde tengo que agregar lo que indicas??? Ya sé que en lo de HTML pero después o antes de qué???

      Gracias de antemano

      Eliminar
    2. Hola gogo,

      En el caso de es ejemplo que he puesto, tienes que crear un elemento HTML/Javascript, ahí poner manualmente el enlace a las etiquetas. Es decir, usar esta línea por cada etiqueta que tengas:
      <a href="URL de la etiqueta">Nombre de la etiqueta</a>

      Y con la que quieras ponerle un ícono usa este código:
      <img src="URL del icono" /> <a href="URL de la etiqueta">Nombre de la etiqueta</a>

      Saludos.

      Eliminar
  27. potro y para poner icono a enlaces como por ejemplo donde tu tienes que dice blogs de ayuda para poner iconos asi a enlaces, NO A ETIQUETAS.

    ResponderEliminar
  28. Mira esta entrada:
    http://ciudadblogger.com/2009/06/poner-iconos-en-etiquetas-y-otros.html

    ResponderEliminar
  29. Hola Potro,
    Como estas?.
    Tengo una preguntita: He colocado una etiqueta en mayusculas a una nueva entrada. Es posible cambiar la etiqueta a minusculas?>
    He estado tocando y tocando el paner de control, pero no parece que no me deja...
    Muchas gracias,
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  30. Hola Jose,

    Entra a Creación de entradas > Editar entradas. Ahí selecciona con las casillas las entradas a las que les quieres cambiar la etiqueta. Ya seleccionada verás arriba un menú desplegable que dice 'Acciones de etiquetas...' Da click ahí y debajo de 'Eliminar etiqueta' selecciona la etiqueta que ya no quieres. Eso le eliminará la etiqueta, ahora ahí mismo da click de nuevo a ese menú y debajo de 'Aplicar etiqueta' selecciona 'Nueva etiqueta...'
    Ahí escribe la etiqueta tal como la quieres.
    Saludos.

    ResponderEliminar
  31. Hola Potro..
    Eres grande, genio y fuera de serie!..
    Me ha salido y lo he podido cambiar..
    En ese momento pegue un grito de alegria..
    Pense por un momento que ya no podia modificarlo.
    Muchisimas gracias por tu valiosa informacion.
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  32. Hola sigo los pasos que pones pero no me sale nada

    ResponderEliminar
  33. Prueba entonces con este otro método:
    http://ciudadblogger.com/2009/06/poner-iconos-en-etiquetas-y-otros.html

    ResponderEliminar
  34. Hola otra vez cuando pongo a buscar la parte de arriba que tu indicas no me sale en mi plantilla blogger lo curioso es que mi plantilla es original de blogger

    ResponderEliminar
  35. Usa las teclas CTRL+F para encontrar los códigos de forma más fácil. Con el método de esta entrada recuerda que debes expandir los artilugios. Con el segundo sólo tienes que reconocer la ID del gadget al que le quieres poner los íconos.

    ResponderEliminar
  36. Hola potro, sabes como especificar la cantidad de entradas en un enlace a etiqueta?

    ResponderEliminar
  37. Hola Sirius,

    Sólo si es en el mismo gadget de Etiquetas, al editarlo te da la opción de mostrar el número de entradas que tiene cada etiqueta. Pero eso es sólo dentro del gadget de Etiquetas.

    ResponderEliminar
  38. hey potro como en ves de que sea un icono pongo una imagen que represente la etiqueta

    por ejemplo una etiqueta que diga

    musica

    y que en ves de que aparesca la etiqueta aparesca una imagen con el mismo nombre de musica y que se dirija a la etiqueta

    nose si me entiendas

    ResponderEliminar
  39. Sí puedes hacerlo pero no con este método.
    Sólo tendrías que poner en un gadget HTML/Javascript un código como este por cada etiqueta que tengas:

    <a href="URL de la etiqueta"><img src="URL de la imagen" /></a>

    Ahí sólo cambias la URL de la imagen que quieres, y la URL de la etiqueta.

    ResponderEliminar
  40. ¿Se puede poner un ícono a los títulos de las entradas?
    =3

    ResponderEliminar
  41. Sí, en esta entrada se explica cómo:
    http://ciudadblogger.com/2009/07/decora-los-titulos-de-los-post-con.html

    ResponderEliminar
  42. Hola Potro,
    te planteo una duda aquí aunque no tiene que ver directamente con esta entrada:

    -he cambiado el fondo de los gadgets de la sidebar en mi blog entrando en Diseñador de plantillas / avanzado. Se cambia el fondo de todos los gadgets al color elegido.¿Es posible coger un gadegt -en mi caso el de etiquetas- y personalizar sólo su fondo, de manera que el resto de gadgets mantengan el color que he cambiado en bloque en el diseñador de plantillas?
    Me gustaría poder personalizarle tanto el fondo como el color de los enlaces/enlaces visitados/color al situar el cursor.

    ¿Cómo se haría?

    Gracias por tu ayuda.

    ResponderEliminar
  43. Hola Potro,
    he olvidado dejarte la dirección por si ayuda observar el blog:
    www.efcondearanda.blogspot.com



    GRACIAS

    ResponderEliminar
  44. Hola jorge,

    Es el mismo método, sólo tienes que conseguir el ID del gadget que quieres modificar y poner los estilos adecuados:

    #ID {
    background:#FF00FF;
    }

    Eso hará que sólo ese gadget cambie su color de fondo.
    Saludos.

    ResponderEliminar
  45. Pregunta: ya puse el ícono a las etiquetas, hasta ahí todo bien, quedó un poco mejor, pero el título "Mis artículos" que en realidad son la lista de etiquetas, quedó pegado hacia la izquierda y lo quiero centrado...igual que el de Mis enlaces, se puede hacer eso? gracias.

    ResponderEliminar
  46. Puedes centrar todos los títulos de los gadgets de una vez, para ello añade debajo de h2 { esto:
    text-align:center;

    Saludos.

    ResponderEliminar
  47. Gracias por el aporte!
    i like!
    Funciono!!!!
    gracias

    ResponderEliminar
  48. Potro una pregunta, si en vez de poner una imagen quiero poner un simbolo... como por ejemplo este ">" (sin las comillas) como deberia hacer para aplicarlo?. Reemplazo la imagen por ese signo/simbolo

    ResponderEliminar
    Respuestas
    1. Con este método no se puede, pero con este sí:
      http://ciudadblogger.com/2009/06/poner-iconos-en-etiquetas-y-otros.html

      Pero, en ese caso tendrías que usar el atributo content, por ejemplo:
      li:before {
      content: ">";
      padding-right:7px;
      }

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger