martes, 17 de mayo de 2011

Personalizar las viñetas de los posts

En nuestros posts, es común que usemos listas numeradas o listas con viñetas. Y quizás no nos guste la viñeta que blogger nos ofrece , así que podemos cambiarla por otra imagen, es decir, que podemos personalizar nuestra lista de viñetas como pueden ver en la siguiente imagen, donde hay una lista antes de personalizarla y otra después del cambio.



1.§ En primer lugar, vamos a Diseño - Edición de HTML y con ayuda de Ctrl + F, buscamos /* Posts.

2.§ Debajo de /* Posts pegamos el siguiente código:

.post ul {
margin:0 0 1.25em;
list-style:none;
}

.post ul li {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUyKI_qeqanh8TIHD0xiQqTgHyLtGO0llNTr2Jkw04v84v2psedHjLy_6c31OTrpsbiPg-RwItCYUhCoJFBeLkkR3VaemXTfct8nebY_srFH1XKRmSoeRGn-oF1XjK-MEhIsd0eW6SS1I/s1600/corazon_diyva.png") no-repeat 2px;
margin:0;
padding:0px 3px 3px 17px;
line-height:1.4em;
}

3.§ Para que el ícono quede a la misma altura que el texto, es decir, que no esté muy arriba ni muy abajo, modificamos el padding; podemos reemplazar la imagen por otra.

4.§ Damos click a guardar.

No hay comentarios:

Publicar un comentario