Cara Membuat Sub Menu Pada Blog

Kali ini saya mau posting tentang sub menu
Apa itu Sub Menu ??? ada yang tau?? mungkin bebrapa ada yang tau dan beberapa tidak
Sub menu adalah perpecahan dari menu,biasanya kalau kita mengarahkan pointer kita pada menu, dengan otomatis sub menu akan muncul
Liat nih, keren kan???

Tahap tahap nya sebagai berikut :
Pertama, ubah sesuaikan setelan tab menu dan menu halaman yang akan ditampilkan, dimana caranya adalah seperti yang tampak pada gambar di bawah ini.

Keterangan:

1. Pilih ‘Tab atas’ untuk menampilkan bilah menu di bawah header.

2. Menu yang dibuat pada bagian tersebut (dalam tanda angka 2) hanya menu yang tidak memiliki sub menu di dalamnya.

Apabila setelan telah disesuaikan, maka selanjutnya klik menu ‘Simpan setelan’.

Kedua, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Ketiga, cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut ini tepat di atasnya.

.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: 220px;

}

Keterangan:

Anda dapat mengubah warna garis, teks, background, dan lebar menu dengan menyesuaikan beberapa kode berikut ini:

Kode border: 1px solid #999999; digunakan untuk mengatur setelan garis, color: #000000; background: rgb(243, 244, 246); digunakan untuk mengatur warna default teks dan beckground, color: #ffffff; background: rgb(51, 102, 153); digunakan untuk mengatur warna teks dan background ketika disorot, dan width: 220px; digunakan untuk mengatur lebar sub menu.

Keempat, cari kode <li><a expr:href='data:link.href'><data:link.title/></a></li> dan kemudian perhatikan kode <b:/loop> yang terdapat beberapa baris di bawahnya. Nah, sisipkan kode dengan format berikut ini tepat di bawah <b:/loop>.

<li><a href='#'>Menu</a>

  <ul>

    <li><a href='URL'>Sub Menu 1</a></li>

    <li><a href='URL'>Sub Menu 2</a></li>

    <li><a href='URL'>Sub Menu 3</a></li>

  </ul>

</li>

Keterangan:

Ubah URL sesuai dengan URL yang akan digunakan pada sub menu dan sesuaikan ‘Menu’ serta ‘Sub Menu’ sesuai dengan teks yang akan ditampilkan. Dan apabila akan membuat beberapa menu pull down, maka salin kode tersebut secara berulang di bawahnya kemudian lakukan penyesuaian setelan dengan cara yang sama dengan sebelumnya.

Kelima,(cara yang paling mudah)simpan template.