Selamat datang di: www.jual-rebanamarawis.com ( PUTRA PENDAWA )
Toko / Jual Alat Musik Online dan COD (Cash On Delivery)
Sedia Layanan Antar & bayar di tempat khusus wil Jakarta, Bogor, Depok, Tangerang dan Bekasi (Jabodetabek) dan Sekitarnya
Terima Jasa Servis / Perbaikan
Home » » Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog

Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog

Bullet dan Numbering
Sebelumnya saya ucapkan selamat datang di blog jual rebanamarawis ini, kali ini saya akan menulis tentang Bagaimana Cara Membuat Bullets dengan Numbering Tag HTML pada Posting Blog.
Dalam sebuah karya tulis atau tulisan seringkali kita jumpai daftar item (list), baik berupa penomoran (numbering) maupun bullet yang berfungsi untuk memberikan label atau urutan agar tulisan tersebut terstruktur dengan rapi sehingga dapat dipahami dengan mudah oleh para pembacanya.

Sebenarnya pada post editor blog sudah tersedia fasilitas untuk membuat list baik numbering maupun bullet, untuk blogspot sendiri fasilitas ini terdapat pada mode "Tulis" atau "Compose" yaitu berupa icon, dan penggunaannya cukup dengan meng klik icon tersebut. namun penggunaan fasilitas ini dirasa kurang praktis dan kurang memadai, terutama karena kurangnya variasi type numbering maupun bullet, juga pada saat kita hendak menggunakan list yang bertingkat.

HTML mendukung beberapa format list, baik numbering List dan bullets List.
  1. Tag HTML Numbering List
    Ada beberapa tipe Penomoran (numbering list) antara lain:
    1. type umum (default) dari Numbering adalah lambang bilangan (1,2,3,... dst)
      Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
      Contoh:<ol>
      <li>urutan ke-1</li>
      <li>urutan ke-2</li>
      <li>urutan ke-3</li>
      <li>urutan seterusnya...</li>
      </ol>
      Hasilnya akan terlihat seperti ini:
      Contoh:
      1. urutan ke-1

      2. urutan ke-2

      3. urutan ke-3

      4. urutan seterusnya...

      Ket: Tag ini selalu berpasangan

    2. Huruf romawi (I, II, III, ... atau i, ii, iii,... ),
      Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol type="I"> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
      Contoh:<ol type="I">
      <li>urutan ke-1</li>
      <li>urutan ke-2</li>
      <li>urutan ke-3</li>
      <li>urutan seterusnya...</li></ol>
      Hasilnya akan terlihat seperti ini:
      Contoh:

      1. urutan ke-1

      2. urutan ke-2

      3. urutan ke-3

      4. urutan seterusnya...
    3. Huruf Alfabet ( A,B,C,... atau a,b,c,...)
      Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol type="A"> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
      Contoh:<ol type="I">
      <li>urutan ke-1</li>
      <li>urutan ke-2</li>
      <li>urutan ke-3</li>
      <li>urutan seterusnya...</li></ol>
      Hasilnya akan terlihat seperti ini:
      Contoh:

      1. urutan ke-1

      2. urutan ke-2

      3. urutan ke-3

      4. urutan seterusnya...
  2. Tag HTML Bullet List
    Ada beberapa tipe Bullet (bullet list) antara lain:
    1. Tipe Disc,
      Penulisan Tag HTML nya( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
      Contoh:<ul type="Disc"> <li>urutan ke-1</li> <li>urutan ke-2</li> <li>urutan ke-3</li> <li>urutan seterusnya...</li></ul>
      Hasilnya:
      Contoh:
      • urutan ke-1
      • urutan ke-2
      • urutan ke-3
      • urutan seterusnya...
    2. Tipe Circle
      Penulisan Tag HTML nya ( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
      Contoh:<ul type="Circle"> <li>urutan ke-1</li> <li>urutan ke-2</li> <li>urutan ke-3</li> <li>urutan seterusnya...</li></ul>
      Hasilnya sbb:
      Contoh:
      • urutan ke-1
      • urutan ke-2
      • urutan ke-3
      • urutan seterusnya...
    3. Tipe Square
      Penulisan Tag HTML nya ( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
      Contoh:<ul type="Square">
      <li>urutan ke-1</li><li>urutan ke-2</li><li>urutan ke-3</li><li>urutan seterusnya...</li></ul>
      Hasilnya sebagai berikut:
      Contoh:
      • urutan ke-1
      • urutan ke-2
      • urutan ke-3
      • urutan seterusnya...
Yang menjadi pertanyan adalah bagaimana jika List Numbering dan Bulleting digabung dan bertingkat seperti pada postingan blog saya kali ini?



Contoh Penulisan Tag HTML Bertingkat Selamat mencoba:
<ol type="I"><li>Tingkat I-a <ol type="1"><li>Tingkat ke-2a<ol type="a"><li>Tingkat ke-a</li><ul type="square"><li>square 1</li><li>square 2</li></ul><li>tingkat ke a-2<ul type="disc"><li>disc 1</li><li>disc 2</li></ul></li></ol></li><li>Tingkat ke-2b<ol type="a"><li>Tingkat ke-a</li><ul type="square"><li>square 1</li><li>square 2</li></ul><li>tingkat ke a-2<ul type="disc"><li>disc 1</li><li>disc 2</li></ul></li></ol></li></ol></li>
<li>tingkat I-b<ul type="disc"><li>disc 1<ol type="a"><li>pertama</li><li>kedua</li></ol></li><li>disc 2<ol type="&lt;i&quot;"><li>pertama</li><li>kedua</li>
</ol></li></ul>
</li></ol>
Hasilnya seperti ini:
  1. Tingkat I-a
    1. Tingkat ke-2a
      1. Tingkat ke-a
        • square 1
        • square 2
      2. tingkat ke a-2
        • disc 1
        • disc 2
    2. Tingkat ke-2b
      1. Tingkat ke-a
        • square 1
        • square 2
      2. tingkat ke a-2
        • disc 1
        • disc 2

  2. tingkat I-b
    • disc 1
      1. pertama
      2. kedua
    • disc 2
      1. pertama
      2. kedua

Demikian postingan kali ini mengenai cara Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog semoga bermanfaat.

Artikel yang lainnya:
Artikel lainnya:
Share this article :

2 komentar:

cherylaghniads mengatakan...

sangat bermanfaat gan info dan tips nya, saya yang baru belajar untuk kode-kode HTML ini, sangat terbantu trims
di tgg kunjungan baliknya mas bro
http://cherylaghniads.blogspot.com/

hilman paturusy mengatakan...

terims berat infonya gan, berkat penulisan yang clear saya yang masih awam sekali soal script HTML dapat menerapkannya di blog saya http://hilmanpaturusy.blogspot.com

TOKO PUTRA PENDAWA

Contact Person : Ahmad Royani, ST

bb-marching-drumband HP: 08561452465 / 085286352611
bb-marching-drumband 2B4A736C
 
Copyright © 2013. JUAL ALAT MUSIK MARAWIS & REBANA - All Rights Reserved
Template Created by Mas Template Published by Putra Pendawa
Proudly powered by Blogger |