Style Checklist Tag OL ( Unorder List )

• Diposting oleh : TKIT AL-MUJAHIDIN
• pada tanggal : April 16, 2025

Cara Membuat Gaya Check List yang Modern

Langkah Pertama

1. Buka Blogger dan buat postingan baru
2. Klik tombol "</>" atau pilih tab "HTML" di editor
3. Copy lalu Paste kode HTML berikut ini, dalam postingan

<h3>Contoh Daftar</h3>
    <ul class="rah">
        <li>Item Pertama</li>
        <li>Item Kedua</li>
        <li>Item Ketiga</li>
    </ul>
       

4. Klik "Publikasi" Namun kamu belum bisa melihat hasilnya

Langkah Selanjutnya

Letakkan Kode dibawah ini pada Custom Css panel tata letak

Cara Memasukkan Kode di Custom CSS

1. Ketuk ikon tiga garis di pojok kiri atas.
2. Masuk ke menu Tata Letak.
3. Pada bagian Eduzaid Theme v.30, pilih widget Custom CSS.

ul.rah { list-style: none; padding-left: 35px; } ul.rah > li { margin-bottom: 3px; position: relative; } ul.rah > li::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%233b0764' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; height: 18px; width: 18px; position: absolute; left: -30px; top: 3px; }

4. Copy code CSS berikut ini, lalu Paste kode tersebut di dalam Custum CSS
5. jika terdapat code css lain disana maka kode css ini, letakkan dibawah kode tersebut
6. Simpan perubahan, lalu periksa hasilnya.
7. Ganti kode stroke='%233b0764untuk memberi warna tag UL sesuai Thema Kalian