65

Etiquetas con icono

Usando el CSS, podemos mostrar nuestra lista de etiquetas con un icono delante de cada una de ellas.
1- En primer lugar añadiremos las etiquetas al blog, (si no las tenemos ya añadidas).
2- En el CSS de nuestra plantilla añadimos este trozo de código:
#Label1 li {
list-style:none;
padding-left: 30px;
background: transparent url(URL DE NUESTRO ICONO) no-repeat center left;
}
En "padding-left" he puesto 30px, esa es la distancia del icono al texto, vosotros tenéis que modificarla en función del tamaño del icono, si vais a usar el mio, con 30px quedará perfecto.

Y así se verá:


Esta es la url de mi icono por si queréis usarlo:
http://img526.imageshack.us/img526/7028/taggreenoe1.png

Nota
Se puede usar este sistema para cualquier lista, por ejemplo, si queremos añadir un icono a una lista de links, añadimos el nuevo elemento de links en la plantilla y añadimos en el CSS de la plantilla lo mismo de arriba pero cambiando Label1 li por LinkList1.

En Blogger se pueden añadir listas e incluso las etiquetas, varias veces, por lo que cada vez que queramos cambiar el icono en una nueva lista, pegaremos de nuevo esta porción de CSS, modificando LinkList1 por LinkList2, o Label1 por Label2, y así sucesivamente.

Entradas Relacionadas:

65 comentarios:


...::T o M M y R e Y::...

Gracias rosa por el aporte otorgado...de verdad.

consulta, para poner esos iconos enviar a: de meneame, de.lil.cious, technorati ,etc ...como lo haces, existe alguna ayuda que puedas otorgar, gracias!

mi blog
www.funkyoustencil.blogspot.com

chao

Rosa

Tommyrey, en esta entrada encuentras como hacerlo:
http://elescaparatederosa.blogspot.com/2007/05/marcadores-sociales-en-blogger.html

Anónimo

Hola, en que parte de la plantilla he de agregar el codigo. Uso blogger y mi blog www.villarochel.blogspot.com
Gracias de antemano

Superichy

Hola Señora Rosa... Perdón que le moleste, nada más pasaba a ver como andaba El Escaparate y guay! Sorpresa, te felicito, está riquísimo!
Como siempre, gracias por todo,
RichyahoraelNegro

PD: ¿En qué lugar o en qué link del Escaparate te puedo dejar un beso?

Rubén

Ya lo he hecho y ha quedado bien, aunque he puesto otra imagen.

Rosa, con estas ayudas que nos vas poniendo, poco a poco mi blog va tomando una aire más personal. GRACIAS.

...::T o M M y R e Y::...

eres un amor...te pasaste, gracias!

en mi blog
te he dejado agradecimientos con link directo...de verdad gracias

Rosa

Anónimo, el CSS es donde hay muchas { llaves como esa, todo lo que está antes de ]]></b:skin> es el CSS. Pegalo, por ejemplo justo encima de ]]></b:skin>

Rosa

Tommyrey, gracias a ti!!

Rosa

Super, cuanto bueno por aquí! El beso ya lo has dejado, te mando otro yo a ti! Muaks

Rosa

Rubén, en cuanto pueda paso a verlo..
¡Un abrazo!

galaccia

Hola, Rosa!
Soy nuevo en esto de los Blogs y como veo que tú eres toda una experta, has ganado premios y eres muy gentil en tu habla, quisiera preguntarme sin mayor rodeo cómo puedo modificar el interlineado de mis entradas o textos publicados.

También con esto, deseo darte las gracias y un aplauso ciberespacial por tu labor tan dedicada.

De ante muchas gracias.

Rosa

Galaccia, cuando escribes un post en el editor de entradas si estas usando el modo "redactar" y por lo que sea, cambias a modo "html" Blogger suele espaciar el interlineado, no me preguntes porque, Blogger a veces, parece cosa de brujas...

También puede ser que hayas tocado en Configuración/Formato/ Ahí tiene que poner SI en "Convertir saltos de línea"

galaccia

Hola Rosa!

Muchas gracias por responder.
He verificado todo, lo del Convertidor de Saltos y demases, pero aún no pillo el resultado.
Mas, husmeando por la red, me he encontrado con un código que me puede ayudar con el interlineado, que se debe agregar "Entre (head).....(/head)" [reemplazo los "<" y ">" por paréntesis ya que me lanza un error jejeje, para que te confundas], como indica el autor, mas yo desconozco el cómo introducirlo. Lo he intentado varias veces poniéndolo en cualquier parte que abarque el (head) (/head), pero no consigo resultados y quería ver si algo me falla.
No soy un conocedor del lenguaje HTML ni como utilizarlo correctamente, por lo mismo, te pido ayuda nuevamente, además de un detalle más preciso de la localización del código, para poder entender todo esto.

Discúlpame las molestias, Rosa, pero eres la única experta que he encntrado cn buena voluntad y dedicación.
De ante mano muchas gracias, y te recontra juro que me tomo unas clases para no molestarte más!
Este es el código:

(style type="text/css")
p.big
{
line-height: 2
}
(/style)


muchas gracias!

galaccia

fe de erratas: "Para que te confundas" reeemplázalo por "para que NO te confundas". jejeje

Noa

Me encanta! Ahora buscaré algún icono que me guste, por ahora uso el q has puesto, que ya le da un toque diferente.

Ya no se que hacer contigo...tantas gracias te doy que aburro, pero es que eres demasiado ;)

Fabiana Bump

Rosa:
Es posible en blogger poner un aviso antes que se abra el blog, del estilo entrar o salir, advirtiendo sobre contenido para adultos?
No te olvides de responderme.
¡Gracias!

www.coscorrones.blogspot.com

Rosa

Galaccia, ese código no funcionará tal como está en tu blog.

Mira, la verdad es que pensé que sería lo de configuración, pues a menudo me consultan estas cosas del interlineado y el problema suele estar en el NO que han puesto ahí.

Busca en tu plantilla esto:

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

Verás que tienes de separación 1.6m entre líneas, eso es lo que viene en Blogger por defecto para las entradas, si quieres menos reduce ahí y si quieres más aumenta (USA LA VISTA PREVIA)

Espero que sea esto lo que buscabas.
¡Un saludo!

Rosa

Fabiana, podrías usar una especie de "banner" debajo de la cabecera que lo advirtiese:

http://elescaparatederosa.blogspot.com/2007/06/tabla-para-anuncios-o-anotaciones.html

O podrías usar un popup (ventanita emergente) que saliese al abrir el blog con el mensaje que quieras:
http://elescaparatederosa.blogspot.com/2007/08/ventana-con-mensaje-de-bienvenida.html

Seba

Hola Rosa un gusto escribirte por primera vez, soy de Argentina y me agradan mucho nuestros hermanos españoles!! por todo, en especial por su solidaridad, ej: vos.
Te queria hacer una pregunta...como puedo hacer para poner un icono, mas o menos del tamaño de la casita que esta abajo de todo en tu blog que dice inicio, antes de el titulo de la entrada. no se si me explico!, espero tu respuesta! gracias de todo corazon por toda la ayuda q nos brindas a miles de bloggers, ej yo un bloggero de 15 años :p! besos!

Rosa

Seba, bienvenido!

Creo que lo que buscas es esto:

Icono entradas

Seba

Gracias por contestar!! que rapido! jejeje, exactamente es eso lo que queria, gracias! yo que pense que a esta hora estabas durmiendo, como ya son la 01:10am alli! adios

Rosa

Seba, son las 2:14, y yo soy ave nocturna...¡Un abrazo!

Txomin

Hola creo que te será de utilidad esta página con unos cuantos iconos y para los demás también.
Yo todavía ando pez en esto de los blog y me cuesta entrar pero espero que algún DIA pueda ayudar como haces tu y muchos mas.
http://www.clubzonanokia.com/indice-iconos.html
Un fuerte saludo

Rosa

Txomin, gracias, la miraré!

MªJose

Hola Rosa, te he añadido a mi blog www.villarochel.blogspot y si te gustan los animales te recomiendo que lo visites .
Un saludo

Leandro Comeglio

Rosa ¿en donde va pegado el código?,¿antes de "head"?¿despues de "head" ?
Gracias

Rosa

Leandro, en el css, o sea, en cualquier lugar del código siempre que esté antes de ]]></b:skin>

Leandro Comeglio

lo puse antes de :skin> pero no me sale la imagen(le puse una imagen,claro)me sigue saliendo igual o será que pongo mal la url de la imagen, aunque no se la puse entre()como dice ahí.
Gracias

Rosa

Leandro, procura no dejar espacio entre "url" y el primer paréntesis.

Leandro Comeglio

Rosa
NO ME FUNCIONA EL TRUCOOO!!!!!!!!
PORQUE ROSA???HAY ALGO MAL??
MANDAME EL CODIGO CON URL Y TODO A VER SI FUNCIONA

marissa

Rosa ...eres lo máximoooooo, tu no sabes cuanto me ayudas....todo lo que necesit6o lo encuentro aqui en tu pagina, explicado de forma sencilla...te adoro

marissa

Rosa

marissa...gracias :-$

Luis

Hola otra vez: a mi lo que me gustaria es saber como puedo eliminar
los iconos, al menos de momento.
No me gustaba como quedaban cuando puse una lista de etiquetas y ahora que he puesto un menu vertical tampoco me gusta.
Con Explorer aun queda bastante bien, pero con Firefox la verdad es que no queda muy estético.
A lo mejor el problema no es de aqui, pero como son los mismos iconos...
Un Saludo y Gracias

Rosa

Luis, localiza esto en la plantilla:
.sidebar ul li {
list-style: disc url(http://www.blogblog.com/moto_son/diamond.gif) inside;
vertical-align: top;
padding: 0;
margin: 0;
}

Y cámbialo así:
.sidebar ul li {
list-style:none;
vertical-align: top;
padding: 0;
margin: 0;

Luis

Perfecto... me lleve un susto porque faltaba la llave de cierre y me hacia una cosa muy rara, pero me di cuenta y queda bien.Gracias
Otra cosa:
¿Como podria centrar el menú vertical para que no me quede tan pegado al marco de la izquierda?

Luis

En cuanto a lo de centrar el menu... ya lo consegui. Pense que tenia que modificar el codigo del CSS, pero me di cuenta que es un simple center en el HTML.
Un saludo y Gracias por atenderme.

Rosa

Luis,eres un artista! ;-)

ZonaDu

Hola Rosa, es la primera vez que te escribo y la verdad es que tu blog me ha sido de ayuda en varias ocasiones. Ahora mismo tengo una cuestión y no encuentro respuesta, si peudes contestarme te lo agradecería. Con el tema de los iconos delante de las listas no sé cómo hacerlo en una lista de feeds de últimas entradas. Mi conocimiento del html es bastante limitado y creo que tú puedes ayudarme. Ojalá sea así.
Un saludo y muchas gracias por la atención.

Rosa

ZonaDu, añades el elemento Feed de Blogger para ultimas entradas. Dentro de la plantilla sin expandir artilugios, tienes que localizar la línea que corresponde a ese elemento Feed para mirar su id, si solo has añadido ese elemento Feed al blog, es fácil, su id será Feed1, si tienes más, entonces has de mirarlo.

Luego sigues los pasos como en esta entrada, pero lo que has de poner en el CSS, será algo así:
#Feed1 li {
list-style:none;
padding-left: 32px;
padding-top: 15px;
background: transparent url(URL_DEL_ICONO) no-repeat center left;
}

Digo algo así, porque dependiendo del tamaño de tu icono, tendrás que "jugar" con padding-left y padding-top para que quede correctamente alineado con el titulo de cada entrada en el elemento.

ZonaDu

Muchas gracias rosa, voy a intentarlo a ver si lo consigo. Un saludo y ah! si no te importa voy a poner un link de tu blog en el mío ok?
De nuevo gracias y un saludo!

juank

hola me encanto todo lo que hay en el blog abraso



www.picotruncado.blogspot.com

Rubí

Hola Rosa! ya estamos en otro año que bien!! logramos pasar al siguiente eso ya es muy bueno.

Sabes? he intentado varias veces de ponerle icono a las etiquetas sin lograrlo, no se que pueda estar haciendo mal, hago al pie de la letra tus indicaciones y nada, como te digo lo he intentado como 4 veces en diferentes días. La imagen que quiero poner tiene 32px, y en vez del 30 que tu tienes le pongo 32 para que la imagen quede bien y nada de nada, snif.

Hoy ya me atrevi a pedirte ayuda, cuando puedas me echas la mano por favor? gracias!!

Rosa

Rubí, pegame por favor la url de la imagen tal como tratas de incluirla en el código...quizás sea problema de la url del icono que no sea la correcta...

Rubí

Esta es la Url de la imagen.

http://img229.imageshack.us/img229/1471/ruby32xc9.png

Rubí

Este es el código tal y como lo pongo:

#Label1 li {
list-style:none;
padding-left: 32px;
background: transparent url(http://img229.imageshack.us/img229/1471/ruby32xc9.png) no-repeat center left;
}

Muchas gracias Rosa!

Rosa

Rubí, pues todo está bien y además acabo de probarlo y veo la imagen sin problemas, eso si, 32 es poca separación...

Creo que es porque la imagen está en formato .png y algunos navegadores no las muestran, no se que navegador usas, pero creo que esa es la razón.

Rubí

Estoy usando en este momento firefox, bueno a veces la plantilla también tiene mucho que ver, es lo más probable que sea esa la razón por la que no se deja ver. Ya aumenté la separación a 35, 38 hasta 40 y nada. Muchas gracias por tu atención, como siempre con tanta paciencia. Besos!!!

Rosa

Rubí, creo que pudiera ser que al colocar el código después del del truco del rotador de imágenes, este interfiriera...

Vamos a probar una cosa, coloca el código para las etiquetas, por ejemplo, antes de esta línea de tu código (está algo más arriba):
/* Calendario-Fecha
-------------------- */

Me cuentas...

Rubí

Rosa!!! yaaaa funcionó jejeje, se ve lindo. Le tuve que agregar al código

padding-top: 10px; para el espacio entre cada imagen.

Muchisisimas gracias Rosa, sabía que tu darías con el problema, eres toda una genio!!

Besitos!

Rosa

Rubí, ja,ja, ¡Bien! :/

Alexa

Hola Rosa.. como estas..? primero que nada, quiero felicitarte por tu blog.. es demasiado completo, tengo ya tiempo leyendo.. y creeme que aun no termino.. soy algo nueva en blogger, apenas comencé en enero y estoy aprendiendo.. solo que jaja creo que soy un fracaso, no entiendo mucho todavía eso de los codigos html, voy a intentar hacer esto en las etiquetas, espero poder.. te dejo la direccion de mi blog,http://miamorenelaire.blogspot.com
seré tu fiel seguidora.. gracias por el trabajo que haces.. para ayudarnos.. un beso y q Dios te bendiga..

Rosa

Alexa, muchas gracias y ánimo:D

KiDeNNY

hola Rosa, hace mucho que veo tu blog y gracias por todo.

Mira este es mi blog:
http://member-of-tagruato.blogspot.com/

Y ya les puse icono a las etiquetas de MP3, pero lo que quiero hacer ahora e sponerle iconos a las otras listas que tengo ahi y no se como hacerlo. por favor ayudame.

Saludos.

Rosa

KiDeNNY Mira si te sirve esto:
http://elescaparatederosa.blogspot.com/2009/01/iconos-en-los-enlaces-del-gadget-listas.html

KiDeNNY

Gracias por la rspuesta, pero no me funciono :( lo intente varias veces y nada :(( . O será que tengo que sacar el código de las etiquetas y poner el de los ''LinkList'' ??? O puedo tener los 2 juntos ??

Saludos.

Rosa

KiDeNNY Son independientes, pueden estar los dos perfectamente.

Comment

Hola Rosa, soy bastante nueva en todo esto y todavía ni siquiera he conseguido poner los iconos a las etiquetas porque no localizo el famoso css (he leído lo que pones pero como si fuera chino mandarin). Da igual, soy optimista y mi pregunta es: se puede poner un icono distinto a cada etiqueta?

Rosa

Comment Cuando algo de lo que explico ha de ir colocado en el CSS, para evitar dudas, solo tienes que localizar en el código de tu plantilla esta etiqueta: ]]></b:skin> y colocarlo antes de ella. Esa etiqueta marca el fin del CSS, así que si lo pones antes, siempre estará correctamente colocado.

Por otro lado, si puede ponerse una imagen a cada etiqueta, aunque como es algo un poco o bastante más complicado, yo no lo he publicado, ya que prefiero dedicarme a explicar los "truquillos" más sencillos.

Si quieres ver una explicación de como hacerlo, lo encuentras en Vagabundia:
http://vagabundia.blogspot.com/2009/05/colocar-una-imagen-asociada-una.html

Duendes Juguetones

Hola Rosa!!!
Me encantan los trucos que tienes, además los explicas muy claramente!!! Me interesaba mucho poner los iconos a las etiquetas, pero no lo doy logrado. Localicé el CSS, pegué el código que nos diste y nada!! No se que hago mal!!
Espero que me puedas ayudar!
Un saludo

Rosa

Duendes Juguetones ¿Has colocado la url de tu icono en el lugar correspondiente del código?

Duendes Juguetones

Hola Rosa!!!!
Si que había colocado la dirección en el lugar correcto, pero debí colocar la dirección equivocada... estas cosas pasan, y cuando tienes el día negado!!!! :D En fin, que hoy me puse a ello de nuevo y a la primera me salió!!! Ahora tengo unas lindas florecillas adornando mis etiquetas!!! muchas gracias por hacerlo posible con estos trucos tan útiles!!! Ahora probaré con la barra entre entrada y entrada! Muchas gracias por tu ayuda!
Un besote!

Rosa

Duendes Juguetones¡Me alegro! :D

Free Zone Vacations

Hola Rosa!!!... gracias por todas las respuestas que te he referido con respecto a diversos temas en tu blog y de verdad te felicito, no solamente porque tienes un blog muy completo, sino porque eres generosa en compartir con todos tus conocimientos...
Y a propósito del tema de ésta página... "los enlaces", fíjate que añadí a mi blog un gadget que viene por default sobre los enlaces... allí añadí una lista de idiomas a traducir, mismo que obtuve en google traductor; y así como nos enseñaste a copiar el link (direccion) de la página traducida, así puse mi lista:
- Español
- Français
- Deutsche
- Italiano
- Portugues
Pero me encantaría poder añadir antes de cada palabra la bandera del país... cómo le puedo hacer?... supongo que es parecido a la manera en la que indicas en el tema de ésta página... pero podrías sacarme de dudas y ayudarme a hacerlo?.... muchísimas gracias!

Rosa

Free Zone Vacations Pues no... esto sería lo mismo si fueses a incluir el mismo icono para todos los enlaces... uno distinto para cada uno (cada bandera con su idioma) es imposible... eso solo es posible hacerlo en un gadget HTML añadiendo todo de forma manual...así es como yo he hecho mi sección de "Destacados" a mano...

MundoPhotoshopero

Wow son increibles los trucos que pude utilizar en mi nuevo blog gracias a vos!

Rosa, sos genial!!! ^^

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S