Selasa, 17 April 2012

blog

You are here : Home » » » Membuat Menu Serta Sub Menu Tanpa jQuery

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.
Membuat Menu Serta Sub Menu Tanpa jQuery
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

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 :
<div class='main-outer'> atau
<div id='main-wrapper'> atau
<div id='main'> baca : Cara Mudah + Cepat Mencari Kode Html di Blogger
Setelah kode tersebut sudah ditemukan silakan pasang kode berikut tepat di atasnya
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
</ul>
</div>
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.
Posted by Ahmad Rifai on 00:06 in Membuat Menu Serta Sub Menu Tanpa jQuery | 21 komentar
Tags: ,
Jangan Lupa Klik Tombol Like dan Shareya ... :-)











Membuat Menu Serta Sub Menu Tanpa jQuery
Tentang Admin
Hanya seorang blogger biasa yang ingin mencoba menulis apa saja yang bisa di tulis, baik seputar tutorial blog, blogger template, dsb.
Berlangganan via RSS Feed
Mau baca artikel terbaru langsung di Email kamu? Silahkan masukan alamat email kamu untuk berlangganan artikel baru. (GRATIS!!!)
Jangan lupa konfirmasi di Email Kamu.
Jasa Redesign Template Blogger
Apa Pendapat Kamu
Tinggalkan komentar teman, dan apabila ada kesalahan dalam penulisan artikel Membuat Menu Serta Sub Menu Tanpa jQuery silakan di betulkan ya. Tapi mohon jangan memberi komentar spam, atau komentar beserta link. Kecuali pada halaman Tukar Link maka kamu boleh meninggalkan alamat blog (tapi bukan link yang bisa di klik ya).
Contoh : http://blog.ahmadrifai.net bukan http://blog.ahmadrifai.net

21 komentar

  1. Adraya
    2 Maret 2012 14:37
    Ini yg aku cari, kode di blogger yg baru beda ya? Aku pke yg lama g kluar sub menunya.
    Thx infonya ya. :)
    Reply
  2. Red Computer Store
    8 Maret 2012 08:08
    Thanks infonya yah gan ,..
    senang banget rasanya pas berhasil praktekkan tricknya ,..
    rasanya seperti makan cendol di siang hari bolong (:

    don't stop to share ur trick yah Gan ,..
    Saluuut (:
    Reply
  3. BJGP
    8 Maret 2012 11:27
    trims yang saya cari selama ini, biasanya saya pake kode HTML berupa tambah widget...
    Reply
  4. fajar-sukmawijaya
    14 Maret 2012 07:37
    wahh makasih banyak banyak banyak mas hehe
    Reply
  5. Erdin Suharyadi
    15 Maret 2012 16:01
    Cara ganti warna pada backgroun menu.a gimana ???
    Reply
  6. Ahmad Rifai
    15 Maret 2012 21:01
    @Erdin Suharyadi silakan edit css nya, yaitu kode #cat-nav dsd ....
    Reply
  7. nikiisaku
    18 Maret 2012 16:04
    Setelah dimodif menu,sub menu termasuk ditambah,dikurangi dan diacak posisinya kok no well-formed...? pdhal posisi untuk buka/tutup menu/subnya dah sesuai. Kira2 yg mana ya gan?
    thank
    Reply
  8. wigunanovansyah
    19 Maret 2012 15:10
    Bang ane bingung gimana cara mengisi menu tersebut .kan ane sudah bikin tuh macam macam tapi ane belum bisa liat di dalam isinya bang gimana tuh
    Reply
  9. Dhewi
    22 Maret 2012 00:38
    udah aq coba hasil nya bagus,,(and Aq suka),, boleh riques gak ??

    gmn cara nya biar karakter tulisan sub menu bisa sama dgn karakter pada menu utama..??

    thanks.
    Reply
  10. Ahmad Rifai
    23 Maret 2012 21:00
    @Dhewi Kalau mau sama silakan ganti kode yang ada di baris 15 dengan kode berikut:

    #secnav li ul li a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; width:180px; line-height:30px; padding:0 10px; color:#eee; }
    Reply
  11. Syukrin Thaib
    24 Maret 2012 01:48
    Syukron mas ya...mantap banget postingannya...semoga jadi amal ibadah untuk mas...
    Reply
  12. Property Balikpapan
    28 Maret 2012 22:08
    Mas Mantep kali,
    cara buat sub-sub menunya gimana y ko yang pertama bisa dan selanjuntnya tidak bisa padahal saya copas dari sub menu yang pertama

    mohon penjelasannya apkah ada yg di tambah

    ditunggu inf
    Reply
  13. H. Agung . P
    1 April 2012 17:20
    Mas saya udah copy smua codenya tetapi saat saya pratinjau, tidak keluar pratinjaunya. Tetapi tulisan error 500. Mohon Penjelasannya apa yang salah.
    Reply
  14. Ahmad Rifai
    1 April 2012 21:45
    @H. Agung . P coba pasang ditempat lain, atau jika ingin lebih mudah pasang di widget
    Reply
  15. bendamustika
    7 April 2012 12:12
    salam kenal mas...kunjungan perdana
    Reply
  16. Menyenangkan Hati
    11 April 2012 20:00
    Makasih banget sudah saya coba and ada tampilan menu dan sub menunya. tapi setelah di klik menu atau sub menunya tidak ada yag berubah. tampilannya sama semua. bingung deh saya ......
    Reply
  17. Ahmad Rifai
    12 April 2012 00:34
    @Menyenangkan Hati maksudnya yang berubah apanya ya ???
    Reply
  18. Reisa Permatasari
    12 April 2012 17:30
    mas, bagus udah muncul. tapi menu sebelumnya masih ada. gimana cara ngilangin menu yg sebelumnya?

    terus gmn cara manjangin menu yg baru, saolnya default headernya lebih panjang.
    Reply
  19. Danang Tri
    12 April 2012 17:40
    Gan kalo langsung tata letak bisa ngg ??
    Reply
  20. Menyenangkan Hati
    13 April 2012 13:21
    Menu harizontal dah selesai, trimaksih. kalau boleh tanya, artikel sudah saya buat sebelum buat menu harizontal. Bagaimana cara masukin artikel ke dalam menu atau sub menu tersebut. karna atikel saya ada di beranda semua.
    Reply

Leave a Reply




Posting Lebih Baru Posting Lama Beranda
Diposting oleh di Tidak ada komentar:
Langganan: Komentar (Atom)