Tutoriales Sobre Blogger: Personalizar lista numerada para blogger

En un tutorial anterior vimos como editar nuestras "Lista con viñetas" con un poco de css. Y pensamos por que no hacerlo con nuestra lista numerada. Como las viñetas, la lista numera son bastante apagadas y hoy veremos como agregarle un
poco de css para hacerlas un poco atractivas.

• Personalizar la Viñetas con Imágenes Rellover para Blogger

Antes de comenzar veremos una demostracion en vivo: 

1. Blogger
2. CSS
3. HTML

Comencemos: 

• Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos la siguiente linea CSS.

.post ol li {  position: relative;  display: block;  padding: .4em .4em .4em .8em;  *padding: .4em; > margin: .5em 0 .5em 2.5em;  background: #ddd;  color: #444;  text-decoration: none;  transition: all .3s ease-out; } .post ol li:hover{  background: #eee; } .post ol :before{  content: counter(li);  counter-increment: li;  position: absolute;  left: -2.5em;  top: 50%;  margin-top: -1em;  background: #fa8072;  height: 2em;  width: 2em;  line-height: 2em;  text-align: center;  font-weight: bold; } .post ol :after{  position: absolute;  content: '';  border: .5em solid transparent;  left: -1em;  top: 50%;  margin-top: -.5em;  transition: all .3s ease-out; } .post ol :hover:after{  left: -.5em;  border-left-color: #fa8072; } .post ol{  counter-reset: li;  list-style: none;  *list-style: decimal;  font: 15px 'trebuchet MS', 'lucida sans';  padding: 0;  padding-left:100px;  padding-right:190px;  margin-bottom: 4em;  text-shadow: 0 1px 0 rgba(255,255,255,.5); } .post ol ol{  margin: 0 0 0 2em; }

• Paso 4: Guardamos los cambios realizados.

Como agregarlo en nuestra entrada.  

• Paso 1: Vamos a nuestra entrada y damos clic en lista numera