7 Style penomoran keren

Hallo bloger

Pagi ini saya akan memberikan sebuah css list penomoran yang kebetulan saya punya 7 koleksi dari pada saya simpen sendiri tidak bermanfaat lebih baik saya bagikan di sini untuk klian

Seperti yang kita ketahui bahwa list penomoran di buat seperti ini
<ol>
  <li> TES </li>
  <li> TES </li>
  <li> TES </li>
</ol>

Maka hasilnya akan seperti ini
  1. TES
  2. TES
  3. TES
Jika kalian beralih ke mode Compose kalian tinggal pilih dan tekan seperti gambar di bawah ini



Berhubung penomoran yang di sediakan oleh bloger bersifat normal tanpa style maka saya telah sediakan beberapa style yang mungkin saja kalian
ingin mencobanya berikut daftar style yang saya susun

• 
  
  1 buka css
  
  

  ul{  
   counter-reset: tzs;
    list-style-type:none;
  }
  li:before{
    counter-increment: tzs;
    content: counter(tzs);
    background: blue;
    color: white;
  }

• 
  
  2 Buka css
  
  

  ol {
      list-style-type: none;
      counter-reset: li-counter;
      margin-left: 10%;
      width: 90%;
    }
    ol > li{
      position: relative;
    }
    ol > li:before {
      background-color: #000000;
      border-radius: 50%;
      color: #ffffff;
      content: counter(li-counter, decimal);
      counter-increment: li-counter;
      font-size: 14px;
      height: 20px;
      left: -30px;
      line-height: 23px;
      position: absolute;
      text-align: center;
      top: 0;
      width: 20px;
    }
    
    li {
      margin-bottom: 10px;
    }

• 
  
  3 Buka css
  
  

  ol {
    counter-reset: awesome-counter; // Set up a counter
  
    li {
      margin-bottom: .5em;
      overflow: hidden; // Hide the default ol li numbers
  
      &:before {
        // Add our counter
        content: counter(awesome-counter);
        counter-increment: awesome-counter;
  
        // Awesome CSS
        font-size: 2em;
        margin-right: .5em;
        display: inline-block;
        vertical-align: middle;
      }
      
      &:nth-child(1):before {
        transform: rotate(-5deg);
        font-size: 3em;
        color: #9b59b6;
        text-shadow: 1px 1px 0 #fff, 2px 2px 0 #9b59b6;
      }
      &:nth-child(2):before {
        transform: rotate(10deg);
        font-size: 2em;
        color: #3498db;
        text-shadow: 1px 1px 0 #fff, 2px 2px 0 #3498db;
      }
      &:nth-child(3):before {
        transform: rotate(-20deg);
        font-size: 5em;
        color: #27ae60;
        text-shadow: 1px 1px 0 #fff, 2px 2px 0 #27ae60;
      }    
    }
  }

• 
  
  4 Buka 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;
  }
  

• 
  
  5 buka css
  
  

  ol {
    counter-reset: my-counter;
    list-style: none;
    padding: 0;
  }
  
  li {
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
    
    &:before {
      content: counter(my-counter);
      counter-increment: my-counter;
      background-color: #bada55;
      color: #222;
      display: block;
      float: left;
      line-height: 22px;
      margin-left: -30px;
      text-align: center;
      height: 22px;
      width: 22px;
      border-radius: 50%;
    }
  }
  
  //////////////////////////////
  // Presentation Styles
  //////////////////////////////
  
  body {
    background-color: #222;
    color: #fff;
    font-family: 'Average', serif;
  }
  
  h1 {
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
  }

• 
  
  6 Buka css
  
  

  body {
    background: #2c3e50;
  }
  
  ol {
    list-style-type: none;
    counter-reset: ordered;
    margin-left: 20px;
  }
  
  li {
    margin-bottom: 20px;
    color: white;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
  }
  
  li::before {
    border: 2px solid #e74c3c;
    border-radius: 100%;
    color: #e74c3c;
    content: counter(ordered);
    counter-increment: ordered;
    display: inline-block;
    font-weight: 100;
    margin-left: -50px;
    margin-top: -7px;
    padding: 5px 13px;
    position: absolute;
  }

• 
  
  7 Buka css
  
  

  ol {
    list-style: none;
    counter-reset: my-awesome-counter;
  }
  li {
    counter-increment: my-awesome-counter;
    margin: 0.25rem;
  }
  li::before {
    content: counter(my-awesome-counter);
    background: #662974;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-block;
    line-height: 2rem;
    color: white;
    text-align: center;
    margin-right: 0.5rem;
  }
  ol ol li::before {
    background: #DE51FF;
  }
  ol ol ol li::before {
    background: #EE9EFF;
  }
  
  body {
    font-family: 'PT Serif', serif;
  }

Terima kasih sudah berkunjung

Baca juga