Cara Menghasilkan List Html & Suguhan Sederhana (Basic Of Unordered List) - Pendidikan Blog

Pada dasarnya, nyaris semua hidangan menggunakan struktur HTML list, dalam hal ini yakni unordered list (tag ul) atau daftar tak berurutan yang merangkum keseluruhan list (tag li). Segala bentuk navigasi yang berupa hidangan menggunakan struktur dari tag-tag tersebut dan lalu ditambahi dengan aturan-aturan yang membentuk tampilan, fungsi, serta imbas yang menawan (CSS dan Javascript).

Unordered list digunakan untuk membentuk susunan list/daftar yang tidak disusun menurut urutan angka.  Sedangkan untuk struktur list yang berurutan (ordered list <ol>) disusun menurut urutan angka; dari 1, 2, 3, dan seterusnya. Tentang ini, akan aku diskusikan pada potensi posting selanjutnya.

Dengan sedikit styling, list tersebut akan timbul dengan diawali titik, gambar, ataupun simbol lain sesuai dengan hukum list styling yang dibawa oleh template. Secara advanced, dengan ditambahi styling, fungsi, dan efek, list akan menjadi hidangan horizontal, vertical, atau menu-menu lain yang sungguh menawan 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 hukum luas dan tinggi, baik dengan HTML maupun CSS, performa list akan timbul 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 memudahkan dalam menghasilkan list secara manual, baik untuk kepentingan menghasilkan list di dalam posting maupun menghasilkan hidangan yang mau ditampilkan di sidebar. Hampir seluruh navigasi menu di bab sidebar blog ini aku buat dengan hidangan list manual. Mengapa? Ada beberapa argumentasi mempunyai pengaruh mengapa aku membuat hidangan list secara manual:

1. Kostumisasi isi lebih gampang ketimbang mesti menggunakan widget khusus, misalnya label. Kita sanggup dengan gampang menjalankan pergantian tanpa mesti mengedit Template HTML. Misalnya saat mesti merubah anchor text, mengaplikasikan atribut (misalnya atribut nofollow) pada label, dan bebas menjalankan CSS styling.
2. Tahukah bahwa sebagian besar widget yang menampung automatic generated list menyerupai popular post, recent post, dan widget-widget navigasi lain yang pada lazimnya menggunakan feed links atau redirect links? Link-link semacam itu tidak di-indeks oleh search engine, sebagaimana yang sudah diterangkan Google dalam Panduan dan Kriteria Google Quality Content. Untuk memperkuat page structure, seharusnya perbanyak link list yang eksklusif mengarah ke link/halaman yang dituju.
3. Dapat dengan sesuka hati menertibkan isi menu, tanpa hasil generating dari widget yang kadang tidak cocok dengan keinginan. Misalnya, untuk popular post, anda sanggup dengan gampang memanipulasi isinya untuk memaksimalkan posting yag jarang terjamah pengunjung. :P
4. Dapat menghasilkan list non hidangan (yang bukan digunakan selaku navigasi) dengan gampang di bab sidebar. Misalnya untuk menghasilkan list tertentu yang berfungsi selaku pemberitahuan (anda sanggup menyaksikan misalnya di bab sidebar kanan bawah, tepatnya di bawah logo copyscape  ^_^).

Untuk menghasilkan list hidangan 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:

• Tips Meningkatkan Jumlah Pageview Blog
• Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot
• Memahami Karakteristik dan Cara Optimalkan Label Blogger
• Fitur Baru: Blogger Custom Favicon dan Cara Membuatnya
• HTML Link, Link Gambar, dan Atribut-atribut Penting

Anda sanggup dengan gampang menjadikannya di sidebar selaku pengganti widget hidangan yang isinya sanggup dikontrol secara manual, sehingga sanggup di-handle secara penuh. Untuk menghasilkan list hidangan seperti ini di sidebar, masuk ke Dashboard > Design/Rancangan > klik add a gadget/tambah gadget > pilih HTML/Javascript. Beri judul sesuai isi hidangan dan susun list sesuai keinginan. Tampilan list hidangan akan mengikuti hukum yang sudah dibawa oleh template blog (inherited).

Itulah dasar dari unordered HTML list dan hidangan list. Selanjutnya ke depan aku akan presentasikan beberapa rancangan lain dari banyak sekali macam elemen dan struktur list web/blog beserta styling-nya dan juga akan ada beberapa hidangan horizontal dan vertical yang mau aku persembahkan (Insya Allah).