Tutorial Dasar Mengedit HTML Menu Navigasi Blog

Tutorial Dasar Mengedit Menu Navigasi Blog. Karena, menu horizontal ini sangat penting untuk menunjang kelengkapan blog. Misalkan salah satu cara untuk menghias blog. Tetapi, menu horizontal punya peranan penting lain. Yaitu mempermudah pengunjung untuk menavigasi blog anda. Oleh karena itu dinamakan Menu Navigasi. Kali ini saya akan membahas Cara Mengedit Menu Horizontal nya saja. Untuk cara membuatnya, silahkan baca di Cara Membuat Menu Horizontal Di Blog.

Biasanya, ketika kita membuat blog, lalu menggunakan template dari web web penyedia template, menu navigasi akan muncul dibawah header blog. Tapi, karena baru saja di terapkan di blog kita, menu drop down itu belum ber link dan belum bercabang serta perlu diedit. Nah, sekarang saya akan membahas panduan mengedit menu horizontal / drop down tersebut bagi blogger yang belum bisa.

Tutorial Mengedit HTML Menu Navigasi Blog

1. HTML Menu Navigasi Dasar

<div>
<ul>
<li><a href=''></a></li>
<ul>
</div>

Diatas adalah contoh HTML yang biasa digunakan untuk membentuk menu horizontal. Apabila kita tidak menambahkan CSS pada kode tersebut, link akan tampil vertikal karena menggunakan <ul> <li> atau unordered list. Berikut penjabaran tentang pengertian masing masing kode.

<div> boleh diisi boleh tidak. Tetapi saya sarankan isikan saja kode "div" dengan "class" atau "id" untuk membungkus menu. Supaya tata letaknya sesuai dengan blog anda.
<ul> kondisi menu keseluruhan.
<li> kode yang dipergunakan untuk memberikan kesan menu. Disini kode <li> adalah kode dari satu menu.
<a href=''></a> merupakan kode link yang memberikan fungsi kepada menu supaya saat diklik dapat menuju ke URL yang ditentukan. URL diletakkan pada bagian tanda petik disebelah tanda =. Untuk memberikan tulisan/text pada link, silahkan buat kata sebelum tag penutup </a>.

2. Membuat Sub Menu

Sub menu bisa dikatakan cabang dari menu sebelumnya. Jika HTML sudah diberi CSS, apabila menu disentuh kursor, akan muncul sub menu dibawahnya. Berikut cara membuatnya.
HTML utama yang ada pada langkah 1 adalah seperti ini

<div>
<ul>
<li><a href=''></a></li>
<ul>
</div>

Untuk membuat cabang, kita harus membuat <ul> baru didalam kode <li> dari menu utama. Caranya dengan menghapus tag penutup </li> dan menggantinya dengan <ul>. Setelah menambah <ul>, baru kita buat HTML menu <li> baru seperti diatasnya. Jangan lupa memasang tag penutup </ul> </li>. HTML pun menjadi seperti ini.

<div>
<ul>
<li><a href=''></a>
<ul>
<li><a href=''></a></li>
</ul>
</li>
<ul>
</div>

Sekarang tinggal isikan URL dan teks dari menu. Atau jika ingin menambahkan, copy paste saja kode <li><a href=''></a></li>.

Bagaimana? apakah anda sudah berhasil membuat drop down? Sekian dulu postingan Jona Rendra yang berjudul Panduan Lengkap Mengedit Menu Horizontal Atau Drop Down, semoga bermanfaat untuk anda dan jika ada pertanyaan silahkan poskan komentar