Custom HTML Bullets & Numbering

Tingkatan Basic

Tag HTML yang dipakai untuk membuat bullets adalah <ul> dan numbering adalah <ol>. Setiap list-item yang ditampilkan menggunakan tag <li>. Contoh:

Nomor 1 Nomor 2 Nomor 3	Bullets 1 Bullets 2 Bullets 3
Bullets 1 Bullets 2 Bullets 3	Nomor 1 Nomor 2 Nomor 3

Mengganti Style bullets & numbering:
1. Contoh Numbering menjadi alphabet kecil (lower-alpha):

1. Nomor 1
2. Nomor 2
3. Nomor 3

code: 

<ol style="list-style: lower-alpha;">

<li>Nomor 1</li>

<li>Nomor 2</li>

<li>Nomor 3</li>

</ol>

Perhatikan bahwa perintah yang dipergunakan adalah list-style: jenis-style;
Jenis predefined style / style bawaan yang bisa dipakai adalah:

1. lower-alpha >> a b c
2. upper-alpha >> A B C
3. lower-roman >> i ii iii
4. upper-roman >> I II III
5. decimal >> 1 2 3
6. decimal-leading-zero >> 01 02 03

2. Contoh Bullets:

• Bullets 1
• Bullets 2
• Bullets 3

code: 

<ul style="list-style: square;">

<li>Bullets 1</li>

<li>Bullets 2</li>

<li>Bullets 3</li>

</ul>

Perhatikan bahwa perintah yang dipergunakan adalah list-style: jenis-style;
Jenis predefined style / style bawaan yang bisa dipakai adalah:

1. square
2. disc
3. circle

3. Special Character Selain ketiga predefined style yang diatas bisa menggunakan HTML special character seperti yang ada di sini.

• Bullets 1
• Bullets 2
• Bullets 3

Code HTML:

<div class="contohnumbering">

<ul>

<li>Bullets 1</li>

<li>Bullets 2</li>

<li>Bullets 3</li>

</ul>

</div>

Code CSS:

div.contohnumbering ul {

    list-style: none;

    padding-left: 0;

}

div.contohnumbering ul li:before {

    content: " \2708 ";

    color: #fd3;

    background-color: #000;

    padding: 4px;

}

div.contohnumbering ul li {

    margin-bottom: 8px;

    margin-right: 8px;

}

4. Custom numbering style

1. Nomor 1
2. Nomor 2
3. Nomor 3

Code HTML:

<div class="contohnumbering">

<ol>

<li>Nomor 1</li>

<li>Nomor 2</li>

<li>Nomor 3</li>

</ol>

</div>

Code CSS:

div.contohnumbering ol {

counter-reset: item;

}

div.contohnumbering ol li {

list-style: none;

padding-left: 0px;

font-size: 11px;

position: relative;

left: 42px;

margin-bottom: 8px;

}

div.contohnumbering ol li:before {

display: inline-block;

border-radius: 4px;

background-color: #000;

color: #fff;

width: 24px;

text-align: center;

counter-increment: item;

content: counter(item,decimal-leading-zero);

position: absolute;

left: -36px;

}

Posted by Iskandar

Tweet