Membuat Menu Navigasi Dengan Subkategori Pada Blogger

Membuat Menu Navigasi Dengan Subkategori Pada Blogger

Membuat Menu Navigasi Dengan Subkategori diperlukan jika sobat ingin membuat menu yang bercabang-cabang. Misalnya Sobat mempunyai menu dengan kategori BERITA dan di dalamnya ada subkategori1 dan subkategori1.1 dan seterusnya. Contohnya seperti ini :

# Kategori : 
  - Berita 
    
    ## Subkategori-1 : 
       - Olahraga
         ### Subkategori-1.1 :
           - Sepakbola
         ### Subkategori-1.2 :
           - Basket
         ### Subkategori-1.3 :
           - Volley

     ## Subkategori-2 : 
        - selebritis
          ### Subkategori-2.1 :
           - Selebritis Lokal
          ### Subkategori-2.2 :
           - Selebritis Luar
     
      ## Subkategori-3 : 
        - Fashion
          ### Subkategori-3.1 :
           - Mode Busana
          ### Subkategori-3.2 :
           - Promo
          ### Subkategori-3.3 :
           - Pagelaran Busana

Maka bentuk kode dasar HTML nya seperti ini (sebelum dibuat link) :

<ul> <li>Berita <ul> <li>Olahraga <ul> <li>Sepakbola</li> <li>Basket</li> <li>Volley</li> </ul> </li> <li>selebritis <ul> <li>Selebritis Lokal</li> <li>Selebritis Luar</li> </ul> </li> <li>Fashion <ul> <li>Mode Busana</li> <li>Promo</li> <li>Pagelaran Busana</li> </ul> </li> </ul> </li> </ul>


Dan dibawah ini adalah contoh kode HTML untuk Membuat Menu Navigasi Horizontal Dengan Subkategori yang sudah ditamabahi style CSS dan LINK.


<div id='cat-nav'> <ul class='fl' id='secnav'> <li><a href='#'>Beranda</a></li> <li><a href='#'>Cek Kiriman</a></li> <li><a href='#'>Cara Order</a></li> <li><a href='#'>Katalog</a> <ul id='sub-custom-nav'> <li><a href='#'>Produk</a> <ul id='sub-custom-nav2'> <li><a href='#'>Pengobatan</a></li> <li><a href='#'>khusus anak</a></li> <li><a href='#'>keharmonisan rumah tangga</a></li> <li><a href='#'>peningkat kesuburan</a></li> <li><a href='#'>suplemen ibu hamil</a></li> <li><a href='#'>pelangsing herbal</a></li> <li><a href='#'>Habbatussauda/jinten hitam</a></li> <li><a href='#'>OBAT TETES MATA</a></li> <li><a href='#'>ZAITUN</a></li> <li><a href='#'>KOMBINASI (MADU+H.SAUDA+ZAITUN+HERBAL)</a></li> <li><a href='#'>SARI KURMA</a></li> <li><a href='#'>HERBAL LAIN-LAIN</a></li> <li><a href='#'>AROMA TERAPI / MINYAK ANGIN</a></li> <li><a href='#'>BUMBU HERBAL</a></li> <li><a href='#'>PEMBALUT WANITA</a></li> <li><a href='#'>CREAM KOSMETIK</a></li> <li><a href='#'>MINYAK</a></li> <li><a href='#'>aneka minuman instan</a></li> <li><a href='#'>aneka teh</a></li> </ul> </li> <li><a href='#'>Produsen</a> <ul id='sub-custom-nav2'> <li><a href='#'>al wadey</a></li> <li><a href='#'>al mabruroh</a></li> <li><a href='#'>AL QUBRO </a></li> <li><a href='#'>GRIYA HERBA </a></li> <li><a href='#'>HERBASYAM</a></li> <li><a href='#'>HERBALINDO </a></li> <li><a href='#'>VICOMAS INTERNATIONAL</a></li> <li><a href='#'>HABBATUSSAUDA INT'L </a></li> <li><a href='#'>TAZAKKA </a></li> <li><a href='#'>HERBAL INDO UTAMA </a></li> <li><a href='#'>MULTIVIT </a></li> <li><a href='#'>FATMASARI </a></li> <li><a href='#'>ANNABAWY </a></li> <li><a href='#'>HERBALINDO UTAMA </a></li> <li><a href='#'>HERBA NUSANTARA </a></li> <li><a href='#'>AL BIRUNI / BANARI </a></li> <li><a href='#'>GRIYA AN-NUR </a></li> </ul> </li> </ul> </li> </ul> </div>

Ini adalah kode CSS nya 

/* CSS Menu Navigasi Horizontal Dengan Subkategori */
#cat-nav {background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #BFBDBF),
color-stop(1, #EFEAEF)
);
background-image: -o-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: -moz-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: -webkit-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: -ms-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: linear-gradient(to bottom, #BFBDBF 0%, #EFEAEF 100%);
margin-top:20px;padding:0;height:39px; width: 100%; position: relative; text-transform: uppercase; border-bottom: 5px solid #999999;}

#cat-nav a { color:#666666; text-decoration:none; border-right: 1px solid #999999;}
#cat-nav a:hover { color:#fff;background:#333333;}
#secnav a:active, #secnav a.active {background:#999999; z-index:0;}
#cat-nav li:hover { background:#999999; height:39px; margin-top:0;}
#cat-nav a span { font-family:  tahoma, verdana, arial,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:39px; background:#; }
#secnav a { font-family: arial, tahoma, Verdana,Georgia, "Times New Roman", Times, serif; font-weight:700; font-size:15px; display:block; z-index:100; padding:0 15px; line-height:39px; text-decoration:none;}
#secnav li { float:left; width: auto; height:43px; margin:0; }
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:39px; border-top: 1px solid #000;}
#secnav li ul li a  { font-family: Helvetica, Geneva, Verdana,Arial, "trebuchet MS", Tahoma,  sans-serif; width:230px; line-height:39px; padding:0 10px; font-size:12px; font-style:normal;  color:#000;  background:#E0DCE0; text-spasing:1.5em;}
#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 ul li a ul a:hover, #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;}
#secnav li ul li a:hover { background:#000; height:39px;}
#cat-nav li:active, #cat-nav li.active {background:#999999;}


Cara mengaplikasikannya pada blog :
1. Ubah kode HTML diatas sesuai dengan menu navigasi sobat.
2. Setelah selesai lalu buka template blogger sobat dan letakkan kode HTML tersebut tepat dibawah tag </header>
3. Ubah kode CSS diatas jika ingin tampilannya sesuai dgn keinginan sobat (ukuran, warna, teks dll). Jangan takut umtuk mencoba. Tp jangan lupa save dulu template sobat agar lebih aman
4. Letakkan kode CSS tsb diatas kode ]]></b:skin> yang ada pada template sobat.

Inilah tampilan dari Menu Navigasi Dengan Subkategori dengan menggunakan kode HTML dan CSS diatas. Ini menu navigasi toko online yang menjual produk-produk herbal

• Beranda
• Cek Kiriman
• Cara Order
• Katalog
  • Produk
    • Pengobatan
    • khusus anak
    • keharmonisan rumah tangga
    • peningkat kesuburan
    • suplemen ibu hamil
    • pelangsing herbal
    • Habbatussauda/jinten hitam
    • OBAT TETES MATA
    • ZAITUN
    • KOMBINASI (MADU+H.SAUDA+ZAITUN+HERBAL)
    • SARI KURMA
    • HERBAL LAIN-LAIN
    • AROMA TERAPI / MINYAK ANGIN
    • BUMBU HERBAL
    • PEMBALUT WANITA
    • CREAM KOSMETIK
    • MINYAK
    • aneka minuman instan
    • aneka teh
  • Produsen
    • al wadey
    • al mabruroh
    • AL QUBRO
    • GRIYA HERBA
    • HERBASYAM
    • HERBALINDO
    • VICOMAS INTERNATIONAL
    • HABBATUSSAUDA INT'L
    • TAZAKKA
    • HERBAL INDO UTAMA
    • MULTIVIT
    • FATMASARI
    • ANNABAWY
    • HERBALINDO UTAMA
    • HERBA NUSANTARA
    • AL BIRUNI / BANARI
    • GRIYA AN-NUR

Demikian cara Membuat Menu Navigasi Horizontal Dengan Subkategori Pada Blogger. Jangan lupa memberikan komentar ya sob :)