Te voy a enseñar a crear tus propias listas, listas con bullets personales. Los bullets son los circulitos que salen en una simple lista de blogger, pero con este truco, podrás poner tus bullets favoritos, por ejemplo...
- Ejemplo 1
- Ejemplo 2
- Ejemplo 3
<ul style="list-style-image: url(URL DE TU IMAGEN O BULLET); color: rgb(148, 0, 211); font-weight: bold; font-size: 12pt;">Debes escribir lo siguiente:
<li>TEXTO DE LA LISTA</li>
<li>TEXTO DE LA LISTA</li>
<li>TEXTO DE LA LISTA</li>
</ul>
URL DE TU IMAGEN O BULLET: la dirección (URL) de tu imagen o bullet, podrás encontrar muy lindos iconos en iconlook.
TEXTO DE LA LISTA: la frase o texto que irá en cada nivel, es decir, la palabra o frase que va en la lista ;-D
Si necesitas añadir más cosas a la lista, basta con añadir esta línea (siempre antes de la etiqueta </ul>)
<li>TEXTO DE LA LISTA</li>Si quieres hacer una lista de enlaces, deberás usar este otro código:
<ul style="list-style-image: url(URL DE TU IMAGEN O BULLET); color: rgb(148, 0, 211); font-weight: bold; font-size: 12pt;">Debes incluir lo mismo que antes pero esta vez también deberás poner la URL DE LA WEB O BLOG, que podría ser http://google.es/ por ejemplo ;-D
<li><a href="URL DE LA WEB O BLOG">TEXTO DE LA LISTA</a></li>
<li><a href="URL DE LA WEB O BLOG">TEXTO DE LA LISTA</a></li>
<li><a href="URL DE LA WEB O BLOG">TEXTO DE LA LISTA</a></li>
</ul>
Al igual que en el anterior código, si deseas añadir más palabras a la lista, añade esta línea (siempre antes de la etiqueta </ul>)
<li><a href="URL DE LA WEB O BLOG">TEXTO DE LA LISTA</a></li>Y así quedaría la lista de enlaces...
Ésto también me gusta!!! Por Dios, si me gusta todo..............
¿Lo puedo poner para las etiquetas?
¡Claro que se puede, varech!
En tu caso simplemente debes buscar este bloque:
.sidebar li {
background:transparent url(http://www.blogblog.com/thisaway/icon_list_item.gif) no-repeat scroll left 3px;
padding:0 0 4px 17px;
}
Y reemplazar lo que ves en negrita por la URL (dirección) del icono ;).
Jaime me ha salido a la primera, lo que ocurre es que el círculo es un poco grande. Me gustaría más pequeño y que al pasar el ratón se coloreara.
¿Es muy complicado?
varech, intenta escoger uno de esta página en la que encontrarás varios modelos.
Para lograr el efecto "hover" y hacer que la imagen cambie al pasar el cursor añade antes el icono "fijo" y después inserta este bloque:
#Label1 li a:hover {
background: transparent url(URL DEL ICONO AL PASAR EL CURSOR) no-repeat left top;
color:#ffffff;
padding-top: 8px;
padding-bottom: 8px;
}
Antes de la etiqueta ]]></b:skin>.
Si necesitas algo más dímelo.
Jaime, cuando lo pongo, lo que me cambia de color es el título de las entradas, pero yo quiero que se me rellene de color sólo el icono.
Pongo la URL pero me sale más a la derecha y a distinta altura del que está en blanco.
Siento darte la vara, pero ya llevo un buen rato a ver si puedo pasar sin preguntarte, pero es que no me sale.
Saludos madrileños.:$
Hola Jaime: mira, como lo he puesto en color, me queda bonito y lo voy a dejar así.
Me da mucho miedo tocar tanto la plantilla.
Un saludo.
varech, acabo de verlo y parece que ha quedado muy bien. Debo reconocer que es bastante lioso el tener que estar creando dos iconos similares para conseguir el efecto "hover" al pasar el ratón.
Como siempre suelo decir... Si necesitas cualquier otra cosilla no dudes en avisarme! :D.
¡Abrazos!
Gracias por ayudarme tanto.
Cuando pongas lo de las categorías, ya estaré atenta, que de momento me quedo con la lista entradas llena de "cocina", pero me da un poco de miedo meterme a colocarlo.
Sigo pensando que te debo un jamón.
Varech, acabo de publicar el artículo para crear una sidebar similar a la del Balcón. Puedes acceder a la entrada desde aquí.
P.D Un jamón pequeñín ^^
Gracias, cariño. Un jamón nunca puede see "algo pequeñito.....oh, oh, oh, oh, ooooohhhh" :D
A ver si me quedo sola un ratito y lo incluyo.
Jajajaja Varech! Bueno, centrémonos en el truco y dejemos de lado tan apetecible, sabroso, delicioso... JAMÓN!
¡Muchas gracias Jaime!. Me ha sido se gran utilidad ;)!
¡Bienvenida Sweet Muse! Tu lista ha quedado preciosa. Me gustó mucho la galería de imágenes que utilizas a modo de cabecera, posee transiciones elegantes.