Cara Membuat Sub Menu pada Blog

Cara Membuat Sub Menu pada Blog

Pertama, atur dan aktifkan setelan tab menu dan menu halaman yang akan ditampilkan, caranya seperti tampak pada gambar di bawah ini.

Pilih "Tab Atas" agar menu-menu terdapat pada header. Namun menu-menu ini hanya menu yang tidak dapat ditambahkan sub menu. Jika telah disesuaikan, maka klik "simpan setelan".

Kedua, buka editor template dengan cara mengklik menu "Template" >"Edit HTML">centang "Expand Template Widget"

 

Ketiga, cari kode ]]></b:skin>, gunakan tombol ctrl+F agar lebih mudah. Kemudian sisipkan kode CSS berikut diatasnya kode tersebut.

.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;
}

Keempat, cari kode <li><a expr:href='data:link.href'><data:link.title/></a></li>, agar lebih mudah gunakan tombol ctrl+F. 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='#'>nama menu</a>

  <ul>

    <li><a href='http://regibrader-free.blogspot.com/'>Sub Menu 1</a></li>

    <li><a href='http://regibrader-free.blogspot.com/'>Sub Menu 2</a></li>

    <li><a href='http://regibrader-free.blogspot.com/'>Sub Menu 3</a></li>

  </ul>

</li> 

Ket:

Ubah tulisan yang berwarna merah dengan nama/URL yang di inginkan.

Kelima, simpan template.

Maka seperti inilah Sub menu yang akan tampil.

Sumber: Blogspot