Membuat Menu Serta Sub Menu Tanpa jQuery

Sebenarnya panduan cara membuat menu sudah pernah saya tuliskan di blog ini, artikel tersebut saya beri judul Tutorial bikin menu horizontal di blogger, namun karena tutorial bikin menu horizontal tersebut tidak saya sertai dengan penambahan sub menu akhirnya banyak teman-teman yang menanyakan bagaimana cara membuat sub menu.

Pada artikel kali ini saya akan menuliskan Tutorial/cara membuat menu serta sub menu di blogger tanpa menggunakan jQuery, yakni menggunakan kode html + css saja.

Demo Menu Horizontal

• Home
• Menu 1
• Menu + Sub Menu
  
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu
• Menu + Sub
  
  • Sub 1
  • Sub 2
  • Sub 3
  • Sub 4
  • Sub 5
  • Sub 6

Langsung saja ya, tidak perlu basa-basi

Panduan Langkah Demi Langkah Membuat Menu Horizontal + Sub Menu Di Blogger

Seperti biasa, langkah pertama yang wajib dilakukan adalah login ke blogger.

• PANDUAN UNTUK BLOGGER BARU
• PANDUAN UNTUK BLOGGER LAMA

Tutorial Membuat Menu Serta Sub Menu Tanpa jQuery Untuk Blogger Baru

1. Klik menu seperti ini

2. Klik menu / tulisan Template

3. Klik menu Edit HTML

4. Klik tulisan / menu Lanjutkan

5. Beri centang pada Expand Template Widget

Kode Yang Harus Di Cari / Temukan

Cari kode :

atau

atau

baca : Cara Mudah + Cepat Mencari Kode Html di Blogger

Setelah kode tersebut sudah ditemukan silakan pasang kode berikut tepat di atasnya

Home
Menu 1
Menu + Sub Menu

Sub Menu 1
Sub Menu 2
Sub Menu 3


Menu
Menu + Sub

Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
Sub 6


Menu

Catatan:

Silakan ganti tanda PAGAR (#) dengan link/url yang kamu mau, boleh link posting atau link Label (Kategori)
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.

Hal-hal yang mungkin akan ditanyakan :

1. Kode yang harus dicari tidak ada di blog saya

Solusinya, silakan pasang kode menu horizontak tersebut di tempat yang kira-kira pas dengan yang kamu mau, kemudian klik Preview (Pratinjau). Jika masih belum pas silakan pindahkan  kode tersebut kemudian Pratinjau lagi. Lakukan sampai menunya sudah berada ditempat yang kamu mau.

2. Bagaimana cara memasukkan beberapa artikel dalam 1 menu?

Agar bisa menampilakan beberapa artikel dalam 1 menu maka kamu harus pasang Link Label pada menu tersebut, caranya sama, yaitu dengan cara mengganti tanda pagar (#) dengan link label yang ada di blog teman.

Update 21 Mei 2012
Jika susah pasang menu horizontal nya  pada bagian Edit HTML silakan pasang pada Gadget/Widget (dibawah header), caranya:

1. Klik Tata Letak
2. Klik Add Gadget
3. Pilih Gadget Html/JavaScript
4. Simpan
5. Selesai

Untuk mengubah lebar menu horizontal nya silakan cari kode:

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

Kemudian tambahkan kode (width:900px) di atrara { dan }, sehingga menjadi seperti ini

#cat-nav {background:#156994;width:900px;margin:0 15px;padding:0;height:35px;}

Ingat, angka 900px hanya sebagai contoh saja, silakan rubah angka 900  dengan ukuran lebar yang kamu inginkan (yang sesuai dengan template kamu), bisa juga mengganti kode 900px kode 100%

Untuk mengatur tinggi menu silakan ganti angka 35 pada kode 35px dengan tinggi yang kamu mau.

Untuk mengedit tampilan yang lainnya seperti warna, font, dsb. Silakan dicoba edit sendiri CSS nya ya, yang saya maksud CSS itu adalah kode yang ada di antara .
Update 9 Juni 2012

Bagaimana cara menambahkan menu

Untuk menambahkan menu pada kode menu horizontal di atas silakan tambahkan kode berikut

Menu

Pasang kode di atas sebelum kode

Maka kodenya jadi seperti ini

Menu

Dengan menambahkan kode di atas itu artinya kamu sudah menambahkan 1 menu, jika ingin menambahkan dua menu maka silakan masukkan kode tambahan tersebut 2 x

Menu

Menu

 

Untuk menambahkan menu yang ada sub menu nya maka silakan tambahkan kode berikut

• Sub 1


• Sub 2


• Sub 3


• Sub 4


• Sub 5


• Sub 6

Caranya sama dengan cara menambahkan menu
Bagaimana cara menambahkan sub menu saja?
untuk menambkan sub menu saja caranya hampir sama dengan cara menambahkan menu, silakan sisipkan kode

Sub Menu

Sebelum kode

Sehingga jadinya seperti ini

• Sub 1


• Sub 2


• Sub 3


• Sub 4


• Sub 5


• Sub 6


• Sub Menu

Nah itulah cara menambahkan menu dan sub menu, selamat mencoba.http://yansyahdray.blogspot.com/p/pada-posting-kali-ini-saya-ingin.htmlhttp://yansyahdray.blogspot.com/p/pada-posting-kali-ini-saya-ingin.html