إنضم لنا

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




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







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






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








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





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





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





  • 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
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail