Cara Membuat Sub Menu pada Blog

Membuat Menu atau Laman pada Blog, anda tinggal membuka menu laman pada dashoard. Atau ikuti caranya di link zuhemedia =>ini<= . Tapi untuk membuat submenu atau sublaman ada cara khusus dengan membuka template. Saya yakin jika anda sudah mencobanya, menu dan submenu anda akan tampil keren.

Pada kesempatan ini saya akan berbagi cara untuk membuat sub menu atau sub laman. Langkah-langkahnya adalah sebagai berikut :
1. Login akun blog anda,
2. masuk ke Dashboard blog anda, pilih menu Template => Edit HTML
3. Anda cari ]]></b:skin> dengan menggunakan Ctrl+F
4. Jika sudah ketemu, letakan kode berikut tepat di atas ]]></b:skin>

.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: #00ff7f; 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;
}

- Ubah ukuran menu pada kode warna biru
- Warna border/garis pembatas dengan yang anda inginkan pada kode warna hijau.
- Kode warna orange adalah warna teks pada nama Submenu yang bisa anda ubah, ukuran widht adalah lebar submenu yang bisa anda sesuaikan panjangnya.

5. Selanjutnya, dengan Ctrl+F anda cari kode <li><a expr:href='data:link.href'><data:link.title/></a></li>. Cari kode <b:/loop> yang terletak beberapa baris dibawahnya.
6. Anda letakan kode dibawah tepat setelah kode <b:/loop>.

<li><a href='#'>Menu</a>
  <ul>
    <li><a href='http://zuhe-media.blogspot.com/'>Submenu1</a></li>
    <li><a href='http://zuhe-media.blogspot.com/'>Submenu2</a></li>
    <li><a href='http://zuhe-media.blogspot.com/'>Submenu3</a></li>
  </ul>
</li>

Ubah kode berwarna hijau dengan URL tujuan yang anda inginkan, Nama Menu adalah menu induk. Jika anda tidak akan memberi fungsi link pada menu tersebut, biarkan URL nya tetap '#'. Untuk tulisan berwarna orange anda ubah dengan nama menu dan submenu yang anda inginkan.
Jika anda ingin memasang Menu serta Submenu baru lebih dari satu, maka yang perlu anda lakukan adalah menyalin atau copy kode diatas dan menempelkanya atau paste tepat di bawah kode tersebut ( dibawah kode </li> ) . Selanjutnya, anda tinggal mengeditnya link dan nama menu nya.

5. Jika telah selesai, akhiri dengan klik Simpan Template. Silahkan lihat hasilnya !
Contoh menu saya yang berhasil.

Sekian tutorial yang saya share tentang cara membuat sub menu pada blog. Buka juga cara membuat menu atau laman pada blog.

No comments:

Post a Comment