Cuando ordenamos textos mediante una lista desde el panel de edición de entradas de Blogger, usando la herramienta de lista de viñetas, que se puede reconocer por el siguiente ícono:
, cada elemento de la lista se muestra con el puntito negro que no a todos nos gusta. A ese puntito se le llama viñeta. Es posible cambiar dicho puntito pora que se vea cuadradito, o con forma de disco, si usamos otros valores para la viñeta. Por ejemplo:Para que la viñeta luzca como un cuadrado, usaríamos éste CSS:
.post ul{ list-style-type:square;}
Y el resultado seréa éste:
- Elemento uno
- Elemento dos
Para que la viñeta luzca como un circulito, usaríamos éste CSS:
.post ul{ list-style-type:circle;}
Y el resultado sería éste:
- Elemento uno
- Elemento dos
También podemos usar una imagen, que remplazará al puntito que por defecto tiene cada elemento de la lista, lo cual permitirá darle más presentación a las listas, agregando atractivo visual y adaptarlos al diseño de la plantilla. Dicho en términos coloquiales: todo se verá más mono y combinadito.
Bien, ahora veamos cómo remplazar la viñeta de cada elemento de la lista con una imagen:
Paso 1. Copia el código y pégalo en una nota de tu computadora (notepad) para que desde ahí puedas editarlo:
.post ul{
list-style-image: url(imagen.gif);
}
Luego, sustituye imagen.gif por la URL de la imagen que deseas usar.
Paso 2. Ve a Plantilla ► Personalizar ► Avanzado y en Añadir CSS pegas el código anterior.
Paso 3. Guarda los cambios en Aplicar al blog. ¡Así de fácil y rápido!
¡Lo lograste! , ahora cada vez que hagas listas en tus entradas, usando la opción de lista con viñetas se mostrará la imagen que pusiste.
Recuerda: Para crear las listas, debes usar la lista con viñetas que viene integrada en tu panel de edición de entradas, incluso en Gmail, Windows Live Writer, entre otros programas o editores lo tienen integrado. Es así como se añadirá automáticamente la imagen en cada uno de los elementos de la lista una vez que hayas agregado el código CSS con la imagen.
Estas son algunas imágenes que puedes usar para este propósito, si te gusta alguna, solo haz clic sobre ella y la copias.
¡Ah!, y para quienes les gustan los gifs animados hice también un corazón que late, ¡aahh, qué romántico!
Imágenes de fondo Transparente:
Imágenes de fondo Blanco
Gif Animado:
Por supuesto estos son sólo unos ejemplos. Puedes encontrar muchísimas imágenes en https://www.iconfinder.com/search/?q=bullet.
Nota: De preferencia almacena la (s) imágen(es) tu mismo en Blogger, subiendo la imagen desde una entrada que guardes como borrador, o en una entrada de un blog de pruebas.
Espero que te sea útil.
Referencias:
No hay comentarios:
Publicar un comentario