Cara custom bullet di Blogger

Bullet listing di Blogger bisa kita customisasi tampilannya. Hanya saja nanti pas mau membuat listing atau daftar perlu pakai mode tampilan HTML.

Contoh:

<ul>
  <li>Ini bullet standar</li>
  <li>Ini bullet standar</li>
  <li>Ini bullet standar </li>
</ul>

Contoh bullet warna hijau:

<ul class="centang">
  <li>Ini bullet hijau</li>
  <li>Ini bullet hijau</li>
  <li>Ini bullet hijau</li>
</ul>

Contoh bullet warna merah:

<ul class="silang">
  <li>Ini bullet merah</li>
  <li>Ini bullet merah</li>
  <li>Ini bullet merah</li>
</ul>

Membuatnya pasti sulit, ya, apalagi di HP?

Kabar buruk, saya menulis artikel ini di HP. Jadi, bisa membayangkan konsentrasi saya adalah 240% (di atas 100%) haha...

Cara membuat warna bullet berbeda

Sebelum menggunakan HTML di atas, Anda perlu copy-paste CSS berikut. Kemudian, tempelkan di atas ]]></b:skin>

.centang li::marker {
	color: #28a745;}

.silang li::marker {
	color: #dc3545;}

Anda bisa mengganti kata centang dan silang dengan yang lainnya. Itu digunakan untuk memanggil class saat kita pakai <ul> tadi.

Cara pakai:

Sebagai catatan, ini hanya mengubah warna bullet. Kalau mau ubah jadi ikon ✅ atau ❌, perlu tambahan CSS.

Ada pertanyaan? Mari tuangkan di komentar...