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("http://4.bp.blogspot.com/-kbCK9w40zU0/TdLuqKiHrUI/AAAAAAAABX8/70chzTg4Bhk/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:

Juan Carlos P

Gracias por el tutorial; la verdad es que no me gustaban las viñetas de blogger

Responder
Adrián Aratan

Ahora mismo lo pongo en práctica

Responder
Obed

Gracias esto me ayudo mucho

Responder
Jéssica YK

» 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

Responder
Jéssica YK

» Obed:
Me alegra que te haya ayudado con este post!

S@lu2

Responder
Katty Unda

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

Responder

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.

inicio