Cara Membuat Daftar Kustom Penomoran Bergaya di Blogger

Tutorial membuat numbering list otomatis di Blog

Daftar penomoran kustom bergaya atau custom numbering list style

Custom Numbering List Style

Custom numbering list style atau kustom penomoran bergaya adalah penomoran otomatis dengan bergaya unik, dengan bantuan kode CSS dan HTML blogger, tanpa Javascript sehingga loading situs website blog nya ringan. Fungsi dari Numbering List adalah dapat digunakan sebagai penghitung daftar-item sebagai nilai untuk properti konten penanda kita dan menambahkan konten lainnya. Penomoran daftar ini otomatis bertambah satu.

Tutorial

Bagaimana cara membuat penomoran bergaya ? Cara membuat widget penomoran kustom bergaya atau custom numbering list style di halaman postingan blog, ikuti langkah-langkahnya berikut di bawah ini.

Kode Script CSS Numbering Style

1. Pertama masuk ke Dashboard Blogger.
2. Pilih Tema.
3. Pilih Edit HTML.
4. Langkah #1 - cari kode ]]></b:skin> , kemudian salin script CSS berikut di bawah ini dan tempelkan di atas kode ]]></b:skin>.

/* Custom List Numbering style1*/
 ol.style1 {
     counter-reset:numbers;
     list-style:none;
     padding:0;
}
 ol.style1 > li {
     counter-increment:numbers;
     margin-bottom:25px;
     position:relative;
     margin-left:55px;
}
 ol.style1 > li img {
     margin:15px 0;
     width:100%;
     display:block;
}
 ol.style1 > li #box-download img {
     margin:0;
}
 ol.style1 > li::before {
     content: counter(numbers);
     line-height: 23px;
     font-family: 'Noto Sans',sans-serif;
     font-size: 14px;
     font-weight: 700;
     left: -45px;
     width: 32px;
     height: 32px;
     text-align: center;
     position: absolute;
     color: #eb3b5a;
     border: 5px solid rgba(42,203,186,1.0);
     border-radius: 50px;
     top: -2px;
}
 ol.standard li, ol.style2 li, ol.style0 li, ol.style1 li ul li {
     margin-bottom:15px;
}
 ol.style1 li ul {
     margin-top:15px;
}
 .darkMode ol.style1 > li::before {
     color:rgb(126, 255, 245);
     border-color:rgba(50, 255, 126, 1.0);
}

/* Custom List Numbering style2*/
 ol.style2{
    counter-reset:numbers;
    list-style:none;
    padding:0
}
ol.style2 > li{
    counter-increment:numbers;
    margin-bottom:25px;
    position:relative;
    margin-left:55px
}
ol.style2 > li img{
    margin:15px 0;
    width:100%;
    display:block
}
ol.style2 > li::before{
    content:counter(numbers);
    line-height:23px;
    font-family:'var(--fontB)';
    font-size:14px;
    font-weight:bold;
    left:-45px;
    width:32px;
    height:32px;
    text-align:center;
    position:absolute;
    color: #9c27b0;
    border:5px solid rgb(254 202 87);
    border-radius:50% 0 50% 50%;
    top:-2px
}
ol.style2 li ul li{
    margin-bottom:15px
}
ol.style2 li ul{
    margin-top:15px
}
.darkMode ol.style2 > li::before{
    color:rgb(255, 242, 0);
     border-color:rgba(24, 220, 255, 1.0)
}

5. Terakhir - Pratinjau - Simpan.

---

Numbering Style-1

Demo Numbering List Style-1

Langkah #2a - Salin kode script html style-1 di bawah ini , kemudian tempelkan di halaman postingan blogger.

<ol class="style1">
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>

Hasilnya :

1. Content
2. Content
3. Content

---

Numbering Style-2

Demo Numbering List Style-2

Langkah #2b - Salin kode script html style-2 di bawah ini , kemudian tempelkan di halaman postingan blogger.

<ol class="style2">
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ol>

Hasilnya :

1. Content
2. Content
3. Content

---

Demikian Cara membuat daftar penomoran kustom bergaya atau custom numbering list style di Blogger , semoga bermanfaat.

Go to Link