Download Software dan Games Full Version Gratis Terbaru 2014

Cara Membuat List HTML & Menu Sederhana (Basic of Unordered List)



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.

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:
  1. 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.
  2. 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.
  3. 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
  4. 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  ^_^).
Untuk membuat list menu yang berisi link, cukup tambahkan tag a beserta anchor text-nya di dalam tag li:
<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>
Contoh hasilnya:
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).
google

Catatan:
Jika anda menemui tutorial lama, maka perhatikan bahwa untuk masuk ke Edit HTML template tidak lagi melalui halaman "design/rancangan", melainkan dari dashboard > template > klik edit HTML. Masih bingung mencari dan edit kode di Edit HTML Blogger baru? Simak tips trik berikut:
1. Cara Mencari Kode di HTML Editor Blog
2. Fitur di HTML Editor Baru
3. Tips Edit HTML Blogger (artikel lama)
Cara Membuat List HTML & Menu Sederhana (Basic of Unordered List)
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. 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.

add a comment 21 Comment(s):

Asmara Susanto said...

modifikasi tampilah li gmna mas? share k kotak komentar y :D

Ahmad Khoirul Azmee said...

bisa dengan langsung memasukkan style di tag li:
contoh:
<li style="margin:...;background:...padding:...;border:...;dst....">

atau tambahkan class atau id di bagian ul dan atau li untuk memberi styling (CSS).

contoh (dengan class):
<ul class="css-ul"> dan <li class="css-li">

kemudian buat styling CSS-nya:
<style type="text/css">
.css-ul {background:...;margin:...;dst...}
.css-li {background:...;margin:...;dst...}
</style>

masukkan style CSS tersebut di atas </head> atau langsung di bagian widget (NTML/Javascript)atau edit HTML posting.
untuk dasar-dasar membuat elemen2 CSS, saya rujuk langsung ke w3school.com

JOY said...

Ilmunya sangat bermanfaat, Sahabatku.
Barusan saya langsung terapkan di blog saya. :)

Salam kenal dari saya,
Dany :)

joyo kusumo said...

sangat bagus boss ilmunya,makasih..

Pian Uhuy said...

cara ganti gambar titiknya gmana mas ?????

pakDE-Nanto said...

Iya gan setuju... dan nampaknya loadingnya lebih cepat bila sidebar dibuat secara manual..
Btw kodenya apa gan untuk list style bergambar bintang seperti pada blog ini... makasih...sebelumnya...
Syukur jawab lewat e-mail.

Ahmad Khoirul Azmee said...

@pakde:
jika ingin menggunakan gambar pada list, tidak menggunakan deklarator list-style, melainkan dengan menambahkan background dalam selector css list ( li )
contoh yg saya gunakan:
.sidebar li {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;line-height: 1.5em;background:url(http://hostinggambar.com/icon-list.png) no-repeat 0 0px;}

semoga bermanfaat n thanks buat komentarnya. :)

pakDE-Nanto said...

Waoowww Mantab mas Ahmad .... gambar bisa bikinan/upload sendiri ... thank..
Btw bagaimana CSS untuk daftar list manual seperti di bawah Features Posts and Tutorials seperti blog ini.. bolehkah rahasianya dibuka?
Di blog teman-teman lain pakai script padahal saya menghindari yang memakai script ...

bpkp pusat said...

thanks, dapet lagi informasi bagus

Just For Fun said...

saya newbie nih thanks ya atas panduannya informasinya

al-khoirot said...

aku pingin buat label atas seperti milik mas gimana caranya?
coba lihat diblog ku
"tpqalkhoirot.blogspot.com"
belum ada label atasnya kan? q bingung?
tolong bagi ilmunya?
mkasih

Rudy Hartono said...

makasih sekali infonya yang sangat berguna

aWangg said...

bermanfaat sob
blogwalking ya

eone davilza said...

Tq infox ini yg saya cari

Imron said...

Informasi Cara membuat list ini sangat mudah dipahami Sob, terima kasih sudah berbagi

dee said...

hatur nun kang ilmunya keren abiz, saya msh baru di dunia blog...jadi msh newbie gto...keep posting...bravo buat si akang

Bagus Wicaksono said...

mas mau tanya...bisa gak ketika ada visitor masuk blog kita secara otomatis buka jendela baru dengan link berbeda tanpa mengalihkan blog kita...ontohnya kayak gini >>>http://pekalongan-community.com


web yg mau saya renovasi
http://sedotwc-lancarmulia.blogspot.com/

trimakasih

mochammad tsanyfajar said...

bermanfaat banget gan thanks info nya :D
kalau boleh izin sedot ya gan
mampir mampir juga ya ke blog ane
http://mtfajar.blogspot.com/

dudi-suswandi.blogspot.com said...

terima kasih atas tutorialnya , sangat membantu, salam sukses , dan salam blogger

Blog Master Website said...

Wah ternyata mudah juga ya cara buatnya, luar biasa keren tutorialnya gan

ade rizky tri prasojo said...

oke gan matur nuwun
sampun kula cobi
http://aderizkytriprasojo.blogspot.com/

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

Join Our Team!

© 2013 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap