Cara Menggunakan Bullet & Numbering di Postingan Blog

Cara Menggunakan Bullet & Numbering di Postingan Blog

Dalam tutorial ini, kita akan mencoba memahami bagaimana cara membuat bullet dan numbering (daftar berbutir dan daftar bernomor)

Fitur ini digunakan untuk membuat penomoran yang rapi ketika menampilkan sebuah daftar

Terdapat dua jenis list yang umum digunakan yaitu ordered list (daftar yang terstruktur dan urut) serta unordered list (sebuah daftar tanpa urutan)

Untuk menampilkan urutan 1 2 3 4 atau a b c d kita menggunakan ordered list (daftar berurut) sedangkan unordered list menampilkan dot hitam atau cakram bulat sebagai penanda daftar

Yuk simak selengkapnya !!

Cara Membuat Bullets dan Numbering

Seperti yang biasa kita lakukan di blog gurublogger.id , kita akan praktek terlebih dahulu baru kemudian membahas teorinya

Dummy Text :

<p >
Saya sedang berlatih membuat daftar bullet and numbering, yang biasa digunakan untuk membuat list berurut menggunakan angka, huruf maupun dot cakram.
</p>

Nomer 1<br/>
Nomer 2<br/>
Nomer 3<br/>
Nomer 4<br/>
Nomer 5<br/><br/>

Huruf a<br/>
Huruf b<br/>
Huruf c<br/>
Huruf d<br/>
Huruf e<br/><br/>

Nomer 1<br/>
Nomer 2<br/>
Huruf a<br/>
Huruf b<br/>
Nomer 3<br/>
Nomer 4<br/>
Nomer 5<br/><br/>

ini bullet<br/>
ini bullet<br/>
ini bullet<br/>
ini bullet<br/>
ini bullet<br/><br/>

Nomer 3<br/>
Nomer 4<br/>
Nomer 5

Instruksi menggunakan bullet and dumbering adalah sebagai berikut :

  1. Buat Postingan Baru
  2. Beri Judul Latihan 13 : Membuat Bullet dan Numbering
  3. Copy Dummy Text
  4. Kembali ke postingan baru >> Pindah ke mode HTML kemudian Paste
  5. Beri Format Numbered List (Daftar Bernomor) untuk urutan angka dan huruf
  6. Beri Format Bulleted List (Daftar Berbutir) untuk selain angka dan huruf
  7. Publikasikan Postingan

Lebih jelasnya, ikuti petunjuk animasi cara membuat penomoran berikut ini :

cara-membuat-bullet-dan-numbering

Setelah dipublikasikan, silahkan cek hasilnya...apakah ada yang error?

Hasil latihan guru blogger bisa dilihat di : Latihan membuat bullet dan numbering

Numbered List (Daftar Bernomor)

Dalam post editor blogger diberi nama numbered list (daftar bernomor), namun nama aslinya adalah Ordered list (daftar berurut) disingkat ol

Jadi ketika teman teman menggunakan daftar bernomor, yang muncul adalah kode html ol, dan didalamnya ada li (singkatan dari list).

Kodenya kurang lebih akan terlihat seperti ini :

<ol>

<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>

</ol>

Ingat, seperti telah dijelaskan di topik sebelumnya, bahwa kode html selalu diawali dengan opening tag dan ditutup dengan closing tag <li> ditutup dengan </li> dan <ol> ditutup dengan </ol>

Lalu kenapa huruf a tidak keluar? kenapa yang keluar tetap 1 2 3 urutannya?

Hal itu dikarenakan adanya kekurangan tipe ol didalam kode numbered list yang telah teman teman buat

Untuk membuat urutan dari a kecil b kecil c d e f g dst teman teman harus menambahkan type="a" didalam ol

Untuk membuat urutan A besar B besar C D E F G dst teman teman harus menambahkan type="A" didalam ol

Bila ingin membuat urutan huruf romawi kecil tinggal tambahkan type="i" atau type="I" bila ingin romawi besar

Cara mengaplikasikannya adalah seperti ini :

<ol type="a">

<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>

</ol>

Pertanyaan terkait membuat urutan dengan huruf sudah terjawab, lalu bagaimana bila urutannya tidak mulai dari 1? dari 3 misalnya

caranya mudah, cukup tambahkan start="anka mulai" didalam ol

Cara mengaplikasikan pembuatan numbered list dimulai dari 2 3 atau 4 dst (selain 1):

<ol start="3">

<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>

</ol>

Lalu bagaimana dengan numbered list didalam numbered list seperti contoh kasus diatas, karena ada urutan a b c setelah nomer 2, tapi kemudian dilanjutkan lagi dengan nomer 3

prinsipnya adalah memasukkan ol kedalam ol, bentuk sederhananya mungkin akan terlihat seperti ini

<ol >

<li>Urutan 1</li>
<li>Urutan 2</li>
      <ol>
          <li>huruf a</li>
          <li>huruf b</li>
      </ol>
<li>Urutan 3</li>

</ol>

Teman teman bisa coba coba sendiri untuk mengasah kemampuan membuat numbered list, atau lupakan saja dan bila pada saatnya nanti bertemu teman teman bisa kembali ke halaman ini :D

Bulleted List (Daftar Berbutir)

Didalam blogger diberi nama Bulleted List (Daftar Berpeluru), namun bila teman teman menggunakan bahasa indonesia ternyata terjemahannya adalah Daftar Berbutir)

Tapi tau ngga kalau istilah aslinya adalah Unordered List (Daftar Ngga Urut) disingkat ul

Cara menggunakan bulleted list pada dasarnya sama dengan numbered list, tinggal ol diganti ul

Contoh penggunaan unordered list :

<ul>

<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>

</ul>

Bila ol bisa pakai a kecil, A besar, romawi, dll harusnya ul juga punya type dong?

Betul !!

Beberapa type yang bisa digunakan didalam unordered list adalah "circle", "disc", dan "square" teman teman bisa bereksperimen sendiri karena cara kerja membuat penomoran baik itu menggunakan ul maupun ol adalah sama

catatan terakhir : Bila teman teman bertemu dengan style="text-align: left;" maka kode itu bisa dihapus agar kode html terlihat lebih clean (itu hanyalah kode inline css yang sudah kita bahas di topik sebelumnya)
Artikel tutorial ini adalah bagian dari topik cara membuat blog pribadi gratis di blogger, silahkan klik daftar isi untuk melihat keseluruhan isi topik atau klik next untuk membaca tutorial berikutnya
Komentar
Silahkan, saya ga nggigit !