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:
O también podemos usar el ícono del editor de entradas
Por defecto una lista numerada usa la propiedad decimal y se ve de este modo:
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.
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>:
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:
Por:
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.
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
Por defecto una lista numerada usa la propiedad decimal y se ve de este modo:
- Item 1
- Item 2
- Item 3
- 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-roman | lower-roman | upper-latin | lower-latin | decimal-leading-zero |
|
|
|
|
|
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.
Muy bien potro
ResponderEliminaraunque por el momento no lo usare
pero sabes que sirve muy bien
Muy bien
Muy bueno
y ahora no has hecho plantillas
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
ResponderEliminarUn abrazo!!!
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.
ResponderEliminarSaludos a todos!
ahhh porcierto, cambie de avatar xD.... espero quedarme con este para siempre... jejejej saludos!!
Alex, regresé a la etapa en la que empiezo plantillas y no las acabo =P
ResponderEliminarbrother, jajaja, quizá algún día suceda. Un abrazo!
PepeX, ya no te creemos nada, siempre dices que será el último avatar, jaja.
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
ResponderEliminardime porfavor
GRACIAS POTRO
Hola Alex,
ResponderEliminarTe 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.
Buen trabajo.
ResponderEliminartengo 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
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.
ResponderEliminargrr algo pasa con mi teclado se salta las letras, tendre que cambiarlo.. disculpa las faltas, chao desde stgo de chile
ResponderEliminarEl 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.
ResponderEliminartiernita, no te he entendido cuál es el problema ¿puedes ser más específica? Saludos.
Gracias potro no habia pasado pero ya lo cheque y estoy por colocarlo en uno de mis blogs gracias por lo de la barra
ResponderEliminarPor nada Alex, saludos.
ResponderEliminarola potro!!
ResponderEliminartenga 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..
Hola bLACk,
ResponderEliminarSi 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.
hola quisiera saber como se pone una imagen en vez de la viñeta común en una entrada en blogger. desde ya gracias
ResponderEliminarAl inicio de esta entrada hay un enlace, ahí está la explicación para poner íconos en las viñetas.
ResponderEliminarhola cm puedo poner todo esto no entiendo nada ni como lo explican como se pone por favor diganme
ResponderEliminarHola Anime, ¿exactamente qué no entiendes?
EliminarHola Potro,
ResponderEliminarQuerí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!!
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:
Eliminarhttp://ciudadblogger.com/2009/11/personalizar-las-vinetas-del-blog.html
Muchas gracias por la rapidez de tu respuesta Potro :)
EliminarPues 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
Hola de nuevo ^^
EliminarQuerí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!
Interesante opción :)
Eliminar