Memasang Check List Style Artikel Blog Dengan CSS

Check list itu sama dengan tanda centang dan dalam artikel ini saya akan menjelaskan cara memasang check list artikel blog dengan menggunakan CSS

Daftar isi

Baca Juga

Check list itu sama dengan tanda centang dan dalam artikel ini saya akan menjelaskan cara memasang check list artikel blog dengan menggunakan CSS. Checklist ini merupakan bagian dari list style yang biasa digunakan dalam bentuk angka atau decimal, dan secara default list style ini dalam bentuk tanda lingkaran solid.

Dengan menggunakan list ini maka konteks dalam artikel akan dibagi dalam beberapa list atau dalam bentuk daftar. Baik itu secara berurutan dalam list angka atau dalam bentuk yang lainnya. Dan bentuk list yang biasanya anda lihat berupa angka atau tanda titik, bisa diganti dengan bentuk yang lainnya. Misalkan berupa tanda centang atau checklist, berupa tanda segitiga ke kanan, atau berupa icon lainnya bahkan bisa diganti dengan icon gambar.

Baca Juga: Cara Menambahkan Tanda Centang Judul Artikel

Dan semua yang itu disebut sebagai list-style property yang selalu digunakan untuk membuat daftar list atau penanda urutan dalam artikel. Properti list style ini sendiri tidak hanya digunakan dalam artikel blog tapi jauh sebelum website atau blog ini ada, properti ini sudah ada, yaitu ditulis dengan menggunakan tulisan tangan.

Contoh Properti List Style
Daftar A
Daftar B
Daftar C
Daftar 1
Daftar 2
Daftar 3

Diatas adalah contoh sederhana penggunaan daftar list yang biasa digunakan dalam setiap penulisan daftar sebuah artikel. Dan seperti yang saya sebutkan diatas, dalam keadaan tertentu, daftar list itu bisa diganti dengan menggunakan tanda icon yang lainnya.

Contohnya adalah mengganti dengan menggunakan tanda centang diawal daftar teks tersebut seperti contoh dibawah ini:

      
Daftar A
      
Daftar B
      
Daftar C
    
    * list tidak sejajar karena pengaruh kode CSS yang lain

Dan jika ditulis dalam artikel blog maka hasilnya akan tampak seperti dibawah ini:

• Daftar A
• Daftar B
• Daftar C

Bagaimana cara memasang check list dalam artikel blog?

Untuk membuat dan menampilkan tanda checklist ini, harus menambahkan kode CSS khusus kedalam kode template blog. Gunakan kode CSS dibawah ini untuk membuat icon check didepan daftar teks dalam artikel blog

.check-list{margin:0;padding-left:15px}
.check-list li{position:relative;list-style-type:none;padding-left:20px;margin:0}
.check-list li:before{content:'';display:block;position:absolute;left:0;top:-2px;width:5px;height:12px;border-width:0 2px 2px 0;border-style:solid;border-color:#00a8a8;transform-origin:bottom left;transform:rotate(45deg)}

Selanjutnya, jika ingin menampilkan list checknya didalam artikel, gunakan kode HTML dibawah ini. Anda bisa membuat secara otomatis dengan menggunakan menu Daftar Berbutir yang ada di halaman postingan blog.

<ul>
      <li>Daftar A</li>
      <li>Daftar B</li>
      <li>Daftar C</li></ul>

Dan selanjutnya memasang kode tag class css check-list kedalam kode html daftar berbutir tersebut.

<ul class="check-list">
      <li>Daftar A</li>
      <li>Daftar B</li>
      <li>Daftar C</li></ul>

Dan hasilnya seperti yang sudah saya tulis diatas atau seperti dibawah ini:

• Daftar A
• Daftar B
• Daftar C

Dengan menggunakan dan memasang check list style dalam artikel blog ini, akan membuat tampilan daftar teks atau angka jadi lebih menarik untuk dilihat. Apakah icon check list ini bisa diganti dengan yang lainnya? Tentu saja bisa, anda cukup mengganti kode CSS yang digunakan dengan membentuk icon yang lainnya. Selamat mencoba!