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:
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.
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/AVvXsEgXbpmqtekrDj7DOXKT9VP65oMgwSVJ9SNmFkw_KcFwuuzi4dByoZYSJ1cpWczVXB_EzHtxdjM2aHze8L52sjDL1J4cyPNLGTL4n6WhmC7KV42dTuwK_91yCUw4Od-euSPI4NJc0xQhHqU/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.
6 opinaron:
Gracias por el tutorial; la verdad es que no me gustaban las viñetas de blogger
Ahora mismo lo pongo en práctica
Gracias esto me ayudo mucho
» Juan Carlos P:
Qué bueno que ta haya gustado el tuto.
» Adrián Aratan:
Me avisas qué tal te quedaron las viñetas!
S@lu2
» Obed:
Me alegra que te haya ayudado con este post!
S@lu2
Hola, puse el codigo que me diste, pero me sigue saliendo la misma vitaña que viene por defecto, como hago pra que me salga la que acabo de poner
Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"
Gracias por participar en el blog.