Tutorial #6 – Cara Membuat Bullet dan Numbering List dalam WordPress

Tutorial ini berkaitan tentang membuat senarai bernombor atau point di dalam post WordPress.com.

Kaedahnya agak mudah tetapi boleh menjadi masalah jika tidak faham perkara asas terlebih dahulu. Terdapat 3 kaedah untuk tujuan ini iaitu:

Kaedah #1 – Menu ‘Numbered List’ dan ‘Bulleted List’

Anda boleh sahaja meletak nombor secara manual, tetapi ia tidak praktikal dan tidak kemas. Sebaiknya gunakan option ‘ordered list’ bagi nombor atau ‘unordered list’ bagi bukan nombor.

Sebagai contoh kita ingin menukarkan senarai di bawah sebagai ‘numbered list’ atau ‘Bulleted List’:

Berikut adalah 5 jenis buah-buah tempatan di Malaysia:
Nanas
Mangga Harum Manis
Durian
Jambu Batu

 

Caranya: Select semua perkataan di atas, dan klik sama ada menu ‘Numbered List’ atau ‘Bulleted List’

list-point

 

Hasilnya:

  1. Numbered List

Berikut adalah 5 jenis buah-buah tempatan di Malaysia:

  1. Nanas
  2. Mangga Harum Manis
  3. Durian
  4. Jambu Batu
  5. Pisang

 

  1. Bulleted List

Berikut adalah 5 jenis buah-buah tempatan di Malaysia:

  • Nanas
  • Mangga Harum Manis
  • Durian
  • Jambu Batu
  • Pisang

 

Kaedah #2 – Guna Kod HTML Tags

Kod HTML juga boleh digunakan untuk membuat  ‘Numbered List’ dan ‘Bulleted List’. Biasanya digunakan untuk membantu sistem senarai yang agak kompleks.

Dalam kaedah ini, kod HTML hanya bleh ditulis pada ruangan ‘Text’. Tags yang digunapakai ialah:

edit-kod-HTML

 

Kod HTML TagsMaksud Penggunaan
<ol>Pembuka kod untuk ‘Ordered List’
</ol>Penutup kod untuk ‘Ordered List’
<ul>Pembuka kod untuk ‘Unordered List’
</ul>Penutup kod untuk ‘Unordered List’
<li>Pembuka kod untuk ‘List Item’
</li>Penutup kod untuk ‘List Item’

Gunakan contoh di atas, tuliskan perkataan beserta kod tag seperti di bawah:

  1. Numbered List
Berikut adalah 5 jenis buah-buah tempatan di Malaysia:
<ol>
<li>Nanas</li>
<li>Mangga Harum Manis</li>
<li>Durian</li>
<li>Jambu Batu</li>
<li>Pisang</li>
</ol>

 

Hasil Numbered List:

Berikut adalah 5 jenis buah-buah tempatan di Malaysia:

  1. Nanas
  2. Mangga Harum Manis
  3. Durian
  4. Jambu Batu
  5. Pisang

 

  1. Bulleted List
Berikut adalah 5 jenis buah-buah tempatan di Malaysia:
<ul>
<li>Nanas</li>
<li>Mangga Harum Manis</li>
<li>Durian</li>
<li>Jambu Batu</li>
<li>Pisang</li>
</ul>

 

Hasil Bulleted List:

Berikut adalah 5 jenis buah-buah tempatan di Malaysia:

  • Nanas
  • Mangga Harum Manis
  • Durian
  • Jambu Batu
  • Pisang

 

Kaedah #3 – Ubah Gaya ‘Numbered List’ atau ‘Bulleted List’

Kita boleh ubah style nombor atau bullet yang digunakandalam ‘Numbered List’ atau ‘Bulleted List’. Berikut adalah senarai option bagi ‘list-style’ di boleh diguna di dalam Wp.com post.

Ordered ListUnordered ListUntuk Hiddenkan List-Style
lower-alphadiscnone
lower-romancircle
lower-greeksquare
lower-latin
upper-alpha
upper-roman
upper-greek
upper-latin

Sebagai contoh:

  1. Numbered List-Style ditukar kepada nombor ‘lower-roman’
Berikut adalah 5 jenis buah-buah tempatan di Malaysia:
<ol style=”list-style: lower-roman”>
<li>Nanas</li>
<li>Mangga Harum Manis</li>
<li>Durian</li>
<li>Jambu Batu</li>
<li>Pisang</li>
</ol>

 

Hasil Numbered List:

Berikut adalah 5 jenis buah-buah tempatan di Malaysia:

  1. Nanas
  2. Mangga Harum Manis
  3. Durian
  4. Jambu Batu
  5. Pisang

 

  1. Bulleted List-style ditukar kepada ‘square’
Berikut adalah 5 jenis buah-buah tempatan di Malaysia:
<ul style=”list-style: square”>
<li>Nanas</li>
<li>Mangga Harum Manis</li>
<li>Durian</li>
<li>Jambu Batu</li>
<li>Pisang</li>
</ul>

 

Hasil Bulleted List :

Berikut adalah 5 jenis buah-buah tempatan di Malaysia:

  • Nanas
  • Mangga Harum Manis
  • Durian
  • Jambu Batu
  • Pisang

 

OK, sampai di sini sahaja. Sila bertanya atau berikan komen jika ada masalah.

Anda juga berminat dengan tutorial:

  1. Membuat ‘Table’ dalam post WP.com
  2. Membuat Kotak Border Teks dalam post WP.com

 

Mudahnya Membina Blog‘ by Masterjie

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.