Diseño de listas CSS personalizada para post de Blogger.

Las listas HTML aparecen en su formato con viñetas (pequeños círculos negros) o cuadraditos o tildes. Usando CSS podemos hacerlos elegantes y efectivos.
En este articulo voy a mostrar como implementar en Blogger una lista ordenada para poder usarlas en sus posts para hacelos mas ordenados y bonitos o para usarlas como lista de indicaciones, puntos de tareas ect.

La lista es absolutamente automatica. Pueden agregar tantas lineas como quieren y los numeros apareceran en su orden natural.La lista con los indicaciones abajo es el DEMO de de la lista que obtendran en sus post. Cambiando los colores en la parte CSS la va a adaptar al diseño de su blog.
Pueden ver el codigo original de su creador AQUI
Manos a la obra! Sigan estos pasos!

1. Vaya a su Panel de control de Blogger >> Plantilla >> Editar HTML
2. Ahora haga clic en cualquier lugar en HTML y Presione Ctrl + F
3. Y buscar a </style> - encontraras más, pero funcciona solo con el último
4. Ahora pegue el siguiente código arriba de </style>

CSS

body {
  font-size: 1.2em;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin: 50px;
}

.custom-counter {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 10px;
}

.custom-counter li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0,200,200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

HTML

<ol class="custom-counter">
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>This is the fourth item</li>
  <li>This is the fifth item</li>
  <li>This is the sixth item</li>
</ol

Resultado

1. This is the first item
2. This is the second item
3. This is the third item
4. This is the fourth item
5. This is the fifth item
6. This is the sixth item