Tuesday, 12 February 2013

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.

Menu Drop

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

KATEGORI:
arrow_back
arrow_forward

21 komentar

Aduh makasih banget nih sobat...ane cari tutor beginian akhirnya dapet juga disini...

makasih dah berbagi slam sehat

gak semua, tergantung
menu drop down nya mau di bentuk seperti apa

owh iya, makasih ya sudah berkomentar
salam kenal juga

Bagaimana kalau menu dropdown nya setelah bercabang lalu dibuat cabang lagi, mohon pencerahannya.... terimakasih

bisa kok, pada html cabangnya hapus kode < /li > lalu di bawahnya kasi kode < ul > di bawahnya pasang html menu, stelah itu pasang tag pnutup < /ul > terakhir, dibawahnya lg, tambahkan kode < /li >
sama kayak mau nambahin cabang biasa

cara agar menunya memenuhi halaman blog biar panjang bagaimana

tergantung css menu nya
di postingan ini cuma di bahas cara edit dan menambah cabang menu saja

Saya sudah mencoba untuk point 3. Menambah cabang pada menu yang disentuh kursor
tapi yang terjadi adalah satu menu drop down TIDAK BISA muncul cabang di bawahnya tapi berjajar horizontal dibawahnya. Mohon pencerahannya gan.

waduh, saya kurang mengerti maksud dari "berjajar horizontal dibawahnya". coba, mana alamat blognya saya ingin lihat menu nya

Ini alamat blognya http://alhikmahtoyan.blogspot.com/
Sudah Saya coba untuk point 3. Tapi yang terjadi cabang menunya nggak urut ke bawah, tapi berjajar (horizontal) dibawah menu utamanya. terima kasih atas pencerahannya. salam

wah, setelah saya lihat, css drop down punya blog itu beda. Cssnya gak dilengkapi sama menu li, menu ul li dsb.

menu cabangnya gak ada..itu yang di tampilkan hanya sub menu,,,cara buat menu keluar disamping sub menu gimana?

jadi maksudnya membuat cabang pada sub menu kan? caranya sama seperti membuat cabang dari menu.
coba lihat langkah nomer 5 diatas
pada Cabang Menu 3 (1), hapus kode </li>
lalu bawahnya tambahkan <ul> dibawahnya lagi buat html menu. setelah itu tutup dengan kode </li> dan </ul>

bagaimana cara membuat kotak atau warna pada manu drpdwon?

buat saja warna menu drop down, hover dan menu ul nya kontras
dan atur margin paddingnya supaya terbentuk kotak

mengubah warna drop down, masuk lewat mana ya...

warna sub menu, supaya terlihat gak menyatu sama menu horizontalnya, dibuat warna berbeda. (menurut saya)

Ijin praktekkan dulu ya gan.. kalo belum bisa saya balik lagi
salam kenal

Ini yg gw cari,, Thx bro :D

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar
EmoticonEmoticon