Pada dasarnya, hampir semua menu menggunakan struktur HTML list, dalam hal ini adalah unordered list (tag ul) atau daftar tak berurutan yang merangkum keseluruhan list (tag li). Segala bentuk navigasi yang berupa menu menggunakan struktur dari tag-tag tersebut dan kemudian ditambahi dengan aturan-aturan yang membentuk tampilan, fungsi, serta efek yang menarik (CSS dan Javascript).Unordered list digunakan untuk membentuk susunan list/daftar yang tidak disusun berdasarkan urutan angka. Sedangkan untuk struktur list yang berurutan (ordered list <ol>) disusun berdasarkan urutan angka; dari 1, 2, 3, dan seterusnya. Tentang ini, akan saya bahas pada kesempatan posting selanjutnya.
Dengan sedikit styling, list tersebut akan muncul dengan diawali titik, gambar, ataupun simbol lain sesuai dengan aturan list styling yang dibawa oleh template. Secara advanced, dengan ditambahi styling, fungsi, dan
efek, list akan menjadi menu horizontal, vertical, atau menu-menu lain yang sangat menarik dan eye-catching.
Dengan sedikit styling, list tersebut akan muncul dengan diawali titik, gambar, ataupun simbol lain sesuai dengan aturan list styling yang dibawa oleh template. Secara advanced, dengan ditambahi styling, fungsi, dan
efek, list akan menjadi menu horizontal, vertical, atau menu-menu lain yang sangat menarik dan eye-catching.
Struktur dasar dari unordered list diawali dengan tag <ul> dan ditutup dengan closing tag <ul>. Di dalamnya terdapat susunan list-list yang masing-masing berada dalam tag <li> dan </li>.
<ul>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
</ul>
Tanpa aturan luas dan tinggi, baik dengan HTML maupun CSS, tampilan list akan muncul dalam urutan per baris:
- text/item disini
- text/item disini
- text/item disini
- text/item disini
- text/item disini
Ide penggunaan list sederhana ini akan mempermudah dalam membuat list secara manual, baik untuk kepentingan membuat list di dalam posting maupun membuat menu yang akan ditampilkan di sidebar. Hampir seluruh navigasi menu di bagian sidebar blog ini saya buat dengan menu list manual. Mengapa? Ada beberapa alasan kuat mengapa saya membuat menu list secara manual:
- Kostumisasi isi lebih mudah daripada harus menggunakan widget khusus, misalnya label. Kita dapat dengan mudah melakukan perubahan tanpa harus mengedit Template HTML. Misalnya ketika harus mengubah anchor text, mengaplikasikan atribut (misalnya atribut nofollow) pada label, dan bebas melakukan CSS styling.
- Tahukah bahwa sebagian besar widget yang memuat automatic generated list seperti popular post, recent post, dan widget-widget navigasi lain yang kebanyakan menggunakan feed links atau redirect links? Link-link semacam itu tidak di-indeks oleh search engine, sebagaimana yang telah dijelaskan Google dalam Panduan dan Kriteria Google Quality Content. Untuk memperkuat page structure, sebaiknya perbanyak link list yang langsung mengarah ke link/halaman yang dituju.
- Dapat dengan sesuka hati mengatur isi menu, tanpa hasil generating dari widget yang kadang tidak sesuai dengan keinginan. Misalnya, untuk popular post, anda dapat dengan mudah memanipulasi isinya untuk memaksimalkan posting yag jarang terjamah pengunjung. :P
- Dapat membuat list non menu (yang bukan digunakan sebagai navigasi) dengan mudah di bagian sidebar. Misalnya untuk membuat list tertentu yang berfungsi sebagai informasi (anda dapat melihat contohnya di bagian sidebar kanan bawah, tepatnya di bawah logo copyscape ^_^).
<ul>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
</ul>
Anda dapat dengan mudah membuatnya di sidebar sebagai pengganti widget menu yang isinya dapat diatur secara manual, sehingga dapat di-handle secara penuh. Untuk membuat list menu semacam ini di sidebar, masuk ke Dashboard > Design/Rancangan > klik add a gadget/tambah gadget > pilih HTML/Javascript. Beri judul sesuai isi menu dan susun list sesuai keinginan. Tampilan list menu akan mengikuti aturan yang telah dibawa oleh template blog (inherited).
Itulah dasar dari unordered HTML list dan menu list. Selanjutnya ke depan saya akan presentasikan beberapa konsep lain dari berbagai macam elemen dan struktur list web/blog beserta styling-nya dan juga akan ada beberapa menu horizontal dan vertical yang akan saya persembahkan (Insya Allah).
Judul: Cara Membuat List HTML & Menu Sederhana (Basic of Unordered List)
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh Unknown
Terima Kasih Atas Kunjungan Anda...
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh Unknown
Terima Kasih Atas Kunjungan Anda...
Klik tombol "Like" atau "Suka" bila Anda suka dengan artikel ini. Jangan lupa poskan komentar agar saya dapat berkunjung balik ke blog Anda. Jika Anda ingin membaca artikel lain dari blog ini, maka silakan klik di sini untuk membuka daftar isi. Harap menyertakan dan mencantumkan http://ayibagus-spc.blogspot.com/2012/07/cara-membuat-list-html-menu-sederhana.html bila Anda menyalin dan atau meng-copy artikel ini, dengan menggunakan kode di bawah ini. Terimakasih.
Terima kasih Sudah berkunjung
Ditulis Oleh : Unknown Blogger Indonesia Tetap Kunjungi
Artikel Cara Membuat List HTML & Menu Sederhana (Basic of Unordered List) ini diposting oleh Unknown Pada Hari Senin, 23 Juli 2012. Terima Kasih atas kunjungan sahabat kesini. Semoga sobat dapat berkenan untuk sedikit memberikan sekelumit komentar mengenai postingan kali ini.
ayib adam al-mahjub
|
|
0 komentar:
Posting Komentar
Harap tidak mengepostkan komentar SPAM, Setiap komentar akan dimoderasi, Sehingga mohon maaf apabila saya tidak dapat segera dan atau membalas komentar anda, Terima kasih