Membuat Menu dan Submenu Navigasi




Membuat Menu dan Submenu Navigasi
Tips Cara Membuat Menu dan Submenu Navigasi


Submenu itu adalah menu uraian dari menu induk. Nah untuk membuat submenu langsung saja ikutin langkah- langkash sebagai berikut:
§     Masuk pada bagian Template dan klik Edit Template.
§     Gunakan tombol ctrl+F dan carilah kode ]]></b:skin>.
§     Letakan kode berikut tepat di atas kode ]]></b:skin>.
  1. .tabs-inner .widget li ul {
      z-index: 100; position: absolute;
      left: -999em; height: auto; margin: 0; padding: 0;
      border: 1px solid #999999;
    }
    .tabs-inner .widget li ul, .tabs-inner .widget li ul a,
    .tabs-inner .widget li ul li:first-child a {
      -moz-border-radius: 0px; -webkit-border-radius: 0px;
      -goog-ms-border-radius: 0px; border-radius: 0px;
    }
    .tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
      left: auto;
    }
    .tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
      color: #ffffff; background: rgb(51, 102, 153);
    }
    .tabs-inner .widget li ul a {
      display: block; padding-left: 1.25em; padding-right: 1.25em;
      margin-left: 0px; margin-right: 0px; border: none;
      color: #000000; background: rgb(243, 244, 246);
    }
    .tabs-inner .widget li ul, .tabs-inner .widget li ul a {
      width: 250px;
    }
Anda bisa mengubah ukuran (pada kode warna merah) dan warna (pada kode warna biru) border/garis pembatas dengan yang anda inginkan. Kode warna hijau adalah warna teks pada nama Submenu yang bisa anda ubah. Dan ukuran width adalah lebar submenu, sesuaikan dengan panjang nama pada Submenu.


§  Gunakan tombol ctrl+F dan carilah kode <li><a expr:href='data:link.href'><data:link.title/></a></li>. Kemudian perhatikan kode-kode yang berada beberapa baris di bawahnya, terdapat kode <b:/loop>. Letakan kode berikut tepat di bawah kode<b:/loop>. 
  1. <li><a href='#'>Menu1</a>
      <ul>
        <li><a href= http://www.mizipedia.com/'>Sub Menu 1</a></li>
        <li><a href= http://www.mizipedia.com/'>Sub Menu 2</a></li>
        <li><a href=' http://www.mizipedia.com/'>Sub Menu 3</a></li>
      </ul>
    </li>
Ubah kode berwarna merah dengan URL tujuan yang anda inginkan, untuk Menu1 adalah menu induk. Jika anda tidak akan memberi fungsi link pada menu tersebut, biarkan saja URL nya '#'. Untuk tulisan berwarna kuning anda ubah dengan nama menu dan submenu yang anda inginkan.


Jika anda ingin memasang Menu serta Submenu baru, maka yang perlu anda lakukan adalah menyalin/copy kode diatas dan menempelkanya/paste tepat di bawah kode tersebut. Jadi anda tinggal mengeditnya.

  Jika telah selesai, maka akhiri dengan klik Simpan Template dan dengan demikian pembahasan kali ini pun telah selesai.



Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect