Lista ordenada con un bonito estilo degradado para Blogger.

Que son las Listas ordenadas HTML

Una lista ordenada creada usando el elemento <ol>, y cada elemento de la lista comienza con el elemento <li>.Las listas ordenadas se utilizan cuando el orden de los elementos de la lista es importante. Los elementos de la lista en una lista ordenada están marcados con números. Aquí hay un ejemplo:

<ol>
    <li>Abroche el cinturón de seguridad</li>
    <li>Arranca el motor del coche</li>
    <li>Mira a tu alrededor y vete</li>
</ol>

El resultado del ejemplo anterior se verá así:

1. Abroche el cinturón de seguridad
2. Arranca el motor del coche
3. Mira a tu alrededor y vete

Que tal si a esta simple lista ordenada le demos mas forma para que se adapte mas a las nesecidades de nuestro sitio o blog, y para que se vea bien acorde con los colores de nuestra web y que se vea asi como esta. DEMO Tomando el codigo de codepen lo he cambiado un poco para que puede verse bien en mi blog y he transformado el codigo SCSS a CSS para que puede ser apto para Blogger. Dicho esto vamos a incorporar esta linda Lista Ordenada en Blogger.

Paso 1 : Ingrese a su Panel de Blogger.
Paso 2 : Vaya a los Temas de la Sección.
Paso 3 : a Continuación, Vaya a Edición de HTML.
Paso 4 : Ahora buscar ]]></b:skin> y pegar el codigo CSS , justo encima de ella.

/* Gradient Ordered List */
/* box-shadow */
ol.gradient-list > li, ol.gradient-list > li::before {
  box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.125rem rgba(75, 0, 0, 0.05);
}
/*** STYLE ***/
*, *:before, *:after {
  box-sizing: border-box;
}
ol.gradient-list {
  counter-reset: gradient-counter;
  list-style: none;
  margin: 1.75rem 0;
  padding-left: 1rem;
}
ol.gradient-list > li {
  background: white;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  counter-increment: gradient-counter;
  margin-top: 1rem;
  min-height: 3rem;
  padding: 1rem 1rem 1rem 3rem;
  position: relative;
}
ol.gradient-list > li::before, ol.gradient-list > li::after {
  background: linear-gradient(135deg, #a2ed56 0%, #fddc32 100%);
  border-radius: 1rem 1rem 0 1rem;
  content: '';
  height: 3rem;
  left: -1rem;
  overflow: hidden;
  position: absolute;
  top: -1rem;
  width: 3rem;
}
ol.gradient-list > li::before {
  align-items: flex-end;
  content: counter(gradient-counter);
  color: #1d1f20;
  display: flex;
  font: 900 1.5em/1 'Montserrat';
  justify-content: flex-end;
  padding: 0.125em 0.25em;
  z-index: 1;
}
ol.gradient-list > li:nth-child(10n + 1):before {
  background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
}
ol.gradient-list > li:nth-child(10n + 2):before {
  background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
}
ol.gradient-list > li:nth-child(10n + 3):before {
  background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
}
ol.gradient-list > li:nth-child(10n + 4):before {
  background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
}
ol.gradient-list > li:nth-child(10n + 5):before {
  background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
}
ol.gradient-list > li:nth-child(10n + 6):before {
  background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
}
ol.gradient-list > li:nth-child(10n + 7):before {
  background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
}
ol.gradient-list > li:nth-child(10n + 8):before {
  background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
}
ol.gradient-list > li:nth-child(10n + 9):before {
  background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
}
ol.gradient-list > li:nth-child(10n + 10):before {
  background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%);
}
ol.gradient-list > li + li {
  margin-top: 2rem;
}

Paso 5 : Y por ultimo apretar para hacer los cambios.

Ahora cuando quieren usar la Lista Ordenada en sus posts solo deben añadir el siguiente codigo HTML de abajo en el. Pueden agregat tantos <li>.........</li> que quieren y saldran en la lista con su numero correspondiente.

<main>
  <ol class="gradient-list">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Aenean tincidunt elit at ipsum cursus, vitae interdum nulla suscipit.</li>
    <li>Curabitur in orci vel risus facilisis accumsan.</li>
  </ol>
</main>

RESULTADOS

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Aenean tincidunt elit at ipsum cursus, vitae interdum nulla suscipit.
3. Curabitur in orci vel risus facilisis accumsan.

Con esto termina la explicacion de la instalacion de la Lista ordenada con efecto degradado en blogger. Comparten y comenten!

This paragraph containshighlightedtext.

This paragraph containshighlightedtext.