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>Contoh hasilnya:
<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).
Written by: Ahmad Khoirul Azmi
Rating: Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan code ini atau share dengan Facebook like diatas/sharing tool di bawah. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.
0 komentar:
Posting Komentar