Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Listas con "bullets" personales

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

Para hacer esta lista, usamos este 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;">
<li>TEXTO DE LA LISTA</li>
<li>TEXTO DE LA LISTA</li>
<li>TEXTO DE LA LISTA</li>
</ul>
Debes escribir lo siguiente:

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;">
<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>
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

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...
¡Suerte! :-D

varech dice...

Ésto también me gusta!!! Por Dios, si me gusta todo..............
¿Lo puedo poner para las etiquetas?

Jaime Trujillo Escobedo dice...

¡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 ;).

varech dice...

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?

Jaime Trujillo Escobedo dice...

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.

varech dice...

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.:$

varech dice...

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.

Jaime Trujillo Escobedo dice...

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!

varech dice...

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.

Jaime Trujillo Escobedo dice...

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 ^^

varech dice...

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.

Jaime Trujillo Escobedo dice...

Jajajaja Varech! Bueno, centrémonos en el truco y dejemos de lado tan apetecible, sabroso, delicioso... JAMÓN!

Sweet Muse dice...

¡Muchas gracias Jaime!. Me ha sido se gran utilidad ;)!

Jaime Trujillo Escobedo dice...

¡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.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo