kali ini saya hanya sedekar ingin berbagi pengetahuan tentang format bullet and numbering dengan HTML. Kalau temen-temen sering ngetik di Microsoft Word pasti sudah pernah menggunakan bullet and numbering. Itu loh… yang berfungsi untuk memberikan label urutan kepada suatu list. Misalnya urutan 1, 2, 3, 4, atau mungkin a, b, c, d, atau bisa juga berupa simbol.
Sebenernya di hampir semua blog sudah tersedia fasilitas penambahan bullet and numbering secara mudah dengan meng-klik iconnya saja, tapi bagi temen-temen yang lebih senang dengan tantangan atau mungkin ingin lebih berkreasi dengan bullet and numbering, bisa melalui HTML.
Contohnya:
1. ini bentuk numbering satu
2. numbering lagi
3. numbering lagi yach…
4. ini yang terakhir
Sejauh yang saya ketahui, untuk membuat bullet and numbering ini bisa langsung melalui HTML, atau bisa juga melalui CSS (Cascading Style Sheet). Namun kali ini saya hanya berbagi cara pembuatan melalui HTML saja, sedangkan via CSS lain kali aja yach… he he he…
Untuk tutorial ini bisa anda coba membuatnya di notepad, atau langsung di blog juga bisa.
Tentukan bentuk bullet/numbering yang anda inginkan. Jika ingin berupa number/nomor, seperti 1, 2, 3, 4, dst, maka kode yang Anda gunakan adalah:
<ol>
<li>ini bentuk numbering satu</li>
<li>numbering lagi</li>
<li>numbering lagi yach...</li>
<li>ini yang terakhir</li>
</ol>
Hasil yang terlihat akan seperti ini:
1. ini bentuk numbering satu
2. numbering lagi
3. numbering lagi yach…
4. ini yang terakhir
Yang menentukan list tersebut berupa number adalah code <ol> dan </ol>.
Sedangkan bila Anda ingin membuat list berupa bullet (simbol), maka code yang bisa Anda gunakan adalah:
<ul>
<li>ini bullet satu</li>
<li>ini bullet lagi</li>
<li>yang ini juga bullet</li>
</ul>
Sehingga hasilnya menjadi
• ini bullet satu
• ini bullet lagi
• yang ini juga bullet
Sedikit ada spesial pada tag UL ini: bentuk bullet bisa kreasikan, baik dengan code maupun dengan gambar. Misalnya:
<ul> <li style="list-style-type:disc">ini bentuk disc bulllet</li>
<li style="list-style-type:circle">ini bentuk circle (lingkaran)</li>
<li style="list-style-type:square">kalo yang ini bentuk persegi</li></ul>
Sehingga hasilnya seperti:
• ini bentuk disc bulllet
o ini bentuk circle (lingkaran)
kalo yang ini bentuk persegi
Kalo mau icon listnya bukan berupa number atau bullet, tapi berupa gambar, Anda bisa menggunakan kode ul tersebut yang ditambahi dengan css inline yang diselipi dengan url gambar icon yang dimaksud. Seperti:
<ul style="list-style-image: url(http://www.blogger.com/favicon.ico)"> <li>ini list yang pake icon gambar</li>
<li>yang ini juga contohnya </li> </ul>
Sehingga hasilnya menjadi:
- ini list yang pake icon gambar
- yang ini juga contohnya
Oke… saya rasa itu aja dulu, ntar sambungannya lain kali aja… yang saya sebutkan di atas hanya contoh saja, silakan Anda kreasikan dengan imajinasi Anda sendiri. Selamat ber eksperimen dan semoga bermanfaat
wah, thanks banget kawan. sungguh membantu. terima kasih, daritadi nyari artikel masalah ini gak ketemu2 keywordnya. mpe2 musti ke ruang posting blogger dulu untuk nyari istilahnya. hehe
ReplyDeletesekalian mau ngasih undangan mampir ke blog saya http://www.agusta27.info/ ditunggu
siip bro,trimakasih banyak informasinya,mampir donk ke blogku,
ReplyDeletedi http://www.shine-community.blogspot.com
Assalamu'alaikum Wr. Wb.
ReplyDeletebagaimana kalo membuat seperti ini...
1. (a) bla bla bla
(b) bla bla bla
2. bla bla bla...
point (b) nya lurus dengan point (a)
terima kasih pencerahannya
Nice info , mantab..
ReplyDeletetapi kenapa tidak bisa saya coba diblog saya ya mas, padahal html code udah bener...???
mohon bantuannya, trims ...
^_^
terima kasih kawan . , sangat membantu . ,
ReplyDeleteini yg aku cari. Pnting bwt sy yg nulis posting pke html manual via ponsel
ReplyDeleteMatur nuwun Kang
Tutorialnya bagus....
ReplyDeleteMohon mampir di blog saya... http://www.toraja-update.blogspot.com
and mohon advisenya...
tqs
owh .. Sgt menguntungkan tutorial ini bg saya yg msh pemula. Mksh bnyk ya z0p. Sem0ga bnyk memberikan manfaat.
ReplyDeleteGood Luck ..pemula. Mksh bnyk ya z0p. Sem0ga bnyk memberikan manfaat.
Good Luck ..
Mantap gan triknya. ane prtaktekin ah..
ReplyDeletesaya pasang di sidebar yg pakai favicon.ico, tapi ga mau nampak. mohon koreksi http://whatnews-1001.blogspot.com
ReplyDeletesalam kenal gan..
ReplyDeletenice info
thank bgt gan,,back to look my blog
ReplyDeletenice info..
ReplyDeletemampir http://gopar-it.blogspot.com/