TRUCOS y
TUTORIALES
para tu blog
No, no vendemos
camisetas... aun
Camiseta Ciudad Blogger

Personalizar las listas numeradas del blog

10 de diciembre de 2009 | Número de comentarios23 comentarios
Anteriormente vimos cómo personalizar las viñetas del blog cambiando el aspecto del ícono mediante CSS.
En esta ocasión haremos lo mismo pero para las listas ordenadas, es decir, las listas numeradas.
Estas listas se forman así mediante HTML:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>

O también podemos usar el ícono del editor de entradas icono lista ordenada

Por defecto una lista numerada usa la propiedad decimal y se ve de este modo:
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

Pero hay otras propiedades que podemos aplicar para cambiar la forma que se muestran los números. Existen varios estilos para las listas ordenadas pero nos enfocaremos en 5 distintas: upper-roman, lower-roman, upper-latin, lower-latin, decimal-leading-zero.

upper-romanlower-romanupper-latinlower-latindecimal-leading-zero
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4


Para cambiar tus listas numeradas del blog por uno de estos estilos entra en Diseño > Edición de HTML y agrega esto antes de ]]></b:skin>:
.post ol li {
list-style: decimal;
margin: 5px 0 0 20px;
padding: 0;
}

Cambia lo que está en color rojo por el estilo que quieras para tus listas.
Estos estilos se aplicarán a las listas numeradas dentro de las entradas. Si quieres aplicarlas sólo a la sidebar cambia la primera línea:
.post ol li {

Por:
.sidebar ol li {

Generalmente casi nadie usa las listas numeradas, así que vale la pena personalizarlas para que las pocas veces que se usen tengan un aspecto distinto.

23 comentarios :

  1. Muy bien potro
    aunque por el momento no lo usare
    pero sabes que sirve muy bien
    Muy bien
    Muy bueno
    y ahora no has hecho plantillas

    ResponderEliminar
  2. hay algo de nuestro blog que aún no se pueda personalizar visitando ciudadblogger?? pregunto esto porque todos los dias entro al blog esperando encontrar un cartelito que diga "lamento no poder traerles mas trucos, ya se agotaron" pero cuando entro encuentro otro post mas!!! XD

    Un abrazo!!!

    ResponderEliminar
  3. jajajaj... ps yo pienso lo mismo que cyberbloggero,la verdad yo entro siempre a ciudad blogger para encontrar algo nuevo, y pues siempre lo encuentro, la verdad que tu blog me ha ayudado mucho potro.
    Saludos a todos!
    ahhh porcierto, cambie de avatar xD.... espero quedarme con este para siempre... jejejej saludos!!

    ResponderEliminar
  4. Alex, regresé a la etapa en la que empiezo plantillas y no las acabo =P

    brother, jajaja, quizá algún día suceda. Un abrazo!

    PepeX, ya no te creemos nada, siempre dices que será el último avatar, jaja.

    ResponderEliminar
  5. Saliendo del Tema de las listas numeradas en la pagina de fondos 240 como colocaste la barra que dice: Dale click a la imagen para verla en tamaño real - Los mejores fondos de pantalla para tu móvil con pantalla de 240 x 320

    dime porfavor
    GRACIAS POTRO

    ResponderEliminar
  6. Hola Alex,

    Te dejo el enlace donde Rosa tiene una excelente explicación al respecto:
    http://elescaparatederosa.blogspot.com/2008/12/barra-anuncio-fija-sobre-el-pie-del.html

    Saludos.

    ResponderEliminar
  7. Buen trabajo.

    tengo una duda.
    en los post de tus plantillas para blogger, habia una parte que decia "Descargar" y luego aparecia el numero de descargas, visite tu post de poner un contador de descargas de archivos, ahora como hago que en vez de el texto de "descarga este archivo" aparezca una imagen

    saludos

    ResponderEliminar
  8. hola potro, desde que te encontre paso a visitarte por dudas ideas asi como a otros blog que ofrecen ayuda igual, e han resultados varios temas pero el que quiero hacer no me resulta es facil pero en el minuto de colocar la URL algo pasa me refiero al de linkerme.. si puedes me ayudas, no te rias por fa... un besito de tiernita.

    ResponderEliminar
  9. grr algo pasa con mi teclado se salta las letras, tendre que cambiarlo.. disculpa las faltas, chao desde stgo de chile

    ResponderEliminar
  10. El Venado, en esa entrada está el enlace a la página del autor, ahí verás que además de poder poner el contador en texto plano se puede con unos número más vistosos, pero nada más. Saludos.

    tiernita, no te he entendido cuál es el problema ¿puedes ser más específica? Saludos.

    ResponderEliminar
  11. Gracias potro no habia pasado pero ya lo cheque y estoy por colocarlo en uno de mis blogs gracias por lo de la barra

    ResponderEliminar
  12. ola potro!!
    tenga una duda un poco fuera del tema, se puede poner un index antes de entrar al blog, asi como presentacion el index? y si se puede como se hace?
    te agradesco de antemano..

    ResponderEliminar
  13. Hola bLACk,

    Si te refieres a un intro sí se puede pero es un tanto complicado porque tienes que tener la página del intro en un servidor y saber crearla en HTML. No es muy recomendable.

    Saludos.

    ResponderEliminar
  14. hola quisiera saber como se pone una imagen en vez de la viñeta común en una entrada en blogger. desde ya gracias

    ResponderEliminar
  15. Al inicio de esta entrada hay un enlace, ahí está la explicación para poner íconos en las viñetas.

    ResponderEliminar
  16. hola cm puedo poner todo esto no entiendo nada ni como lo explican como se pone por favor diganme

    ResponderEliminar
    Respuestas
    1. Hola Anime, ¿exactamente qué no entiendes?

      Eliminar
  17. Hola Potro,
    Quería preguntarte...¿crees que sería posible aplicar un código que simplemente cambie la viñeta de color y la ponga en negrita? Es que todos los códigos que he probado me distorsionan absolutamente todo lo que esté en la lista...
    He intentado con lo que dice esta web (http://www.bloogie.es/tecnologia/programacion/62-como-dar-estilo-de-listas-ol-ordenadas-numeradas-con-css), pero no sé cómo colocarlo para que me funcione :S

    Muchísimas gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Beyka ♫, la viñeta como tal no puede cambiar de color si el texto no lo hace también, pero puedes usar una imagen de una viñeta con el tamaño y color que quieras, claro que eso no aplica para esta entrada, sino para las viñetas:
      http://ciudadblogger.com/2009/11/personalizar-las-vinetas-del-blog.html

      Eliminar
    2. Muchas gracias por la rapidez de tu respuesta Potro :)
      Pues es una lástima, después de ver el otro tuto pensé que tal vez se podría en las viñetas numeradas, supongo que será para colocar en el código desde 0 no?
      Muchas gracias por todo :P

      Eliminar
    3. Hola de nuevo ^^

      Quería decirte que ya he encontrado una manera de hacer lo que te planteaba, es decir, dar formato al número (o a la viñeta elegida) pudiendo mantener el formato del texto (o incluso darle otro nuevo).

      La idea es de Blog and Web: http://blogandweb.com/css/dar-estilo-a-las-listas-ordenadas-con-css/

      Basta con aplicar los dos códigos, "ol{" y "ol p{" y después añadir la etiqueta "p" a cada uno de los elementos de la lista. Bueno mejor explicado está en la web jejeje

      Es un poco más de trabajo pero al fin y al cabo queda bonito :)

      Gracias por tu ayuda, y espero que esto te pueda servir o bien que le sirva a otros usuarios.

      Un abrazo!

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
¿Te gusta Ciudad Blogger?