Cara Membuat Daftar Kustom Penomoran Bergaya di Blogger

Daftar penomoran kustom bergaya atau custom numbering list style

Daftar Penomoran Kustom Bergaya

Bagaimana cara membuat daftar penomoran kustom bergaya atau custom numbering list style di Blogger.

Silakan ikuti tutorialnya di bawah ini.

Tutorial

Ada dua macam jenis style, yaitu style 1 dan 2.

Style 1

1. Buka Dashboard Blogger

2. Pilih Tema

3. Klik Edit HTML

4. Sekarang cari kode </style>

5. Salin kode CSS di bawah ini dan tempel tepat di atas nya.

6. Setelah selesai Simpan

<style> 
/* 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);
}
 </style>

7. Terakhir salin dan tempelkan kode script di bawah ini di halaman postingan blogger.

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

Demo

1. Content


2. Content


3. Content


4. Content


5. Content


6. Content


7. Content

Style 2

1. Buka Dashboard Blogger

2. Pilih Tema

3. Klik Edit HTML

4. Sekarang cari kode </style>

5. Salin kode CSS di bawah ini dan tempel tepat di atas nya.

6. Setelah selesai Simpan

<style> 
/* 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)
}
</style>

7. Terakhir salin dan tempelkan kode script di bawah ini di halaman postingan blogger.

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

Demo

1. Content


2. Content


3. Content


4. Content


5. Content


6. Content


7. Content