#03 Menambah Sub menu (Pull Down Menu)

* Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standard Blogger 

Selama ini kita mengganggap bahawa "pull down menu atau sub menu" yang terdapat dalam page menu horizontal sebuah blog hanya dapat dibuat pada blog yang menggunakan custom template saja. Perkara ini disebabkan kita menambahkan menu baru dengan menggunakan pilihan ‘Laman (Page)’ yang terdapat di dashboard Blogger, Menu tersebut akan ditampilkan dalam satu baris tab menu, sehingga kira merasakan kurang kemas apabila jumlah menu yang digunakan cukup banyak.

Tetapi tahukah Anda bahawasa kita juga dapat melakukan customize pada template standard yang disediakan oleh Blogger dengan menambahkan sub menu ke dalam tab menu yang disediakan. Perlu diingat bahawa apabila jumlah menu yang diwujudkan cukup banyak, sedangkan dari menu yang diwujudkan tersebut terdapat beberapa menu yang memiliki kategori yang sama, maka sebenarnya akan lebih efektif apabila Menu yang mempunyai kategori sama dikumpulkan (dikelompokkan) menjadi satu dalam sebuah sub menu atau pull down menu. 

 Dan inilah salah satu kaedah dari cara mengubah template standard Blogger ini, iaitu untuk mengumpulkan beberapa menu yang memiliki kategori sama ke dalam sebuah menu dengan pull down menu atau sub menu di dalamnya. Untuk keperluan tersebut, maka anda akan dapat melakukan langkah-langkah berikut ini secara langkah demi langkah. 

Pertama, ubahsesuaikan kedudukan tab menu dan menu halaman yang akan diwujudkankan, seperti contoh berikut :

Keterangan:
1. Pilih ‘Tab atas’ untuk menampilkan baris menu di bawah header.
2. Menu yang sediaada (dalam tanda angka 2) hanya menu yang tidak memiliki sub menu di dalamnya.
Apabila tab telah disesuaikan, maka selanjutnya klik menu ‘Save’.

Kedua, buka editor template dengan cara klik menu ‘Template’ > ‘Edit HTML’ >

Ketiga, klik shortcut CTRL + F dan cari kode ]]></b:skin> dan kemudian sisipkan kode CSS dibawah berikut ini tepat di atas kode tadi  (]]></b:skin>) .

Kode CSS

.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 diwujudkan. Dan jika anda ingin membuat  beberapa menu pull down yang lain, maka salin kode tersebut secara berulang di bawahnya kemudian lakukan penyesuaian seperti kaedah yang sama seperti  sebelumnya.

Kelima, simpan template.

Akhirnya anda akan mendapat contoh hasil dari penerapan dari teknik diatas seperti  gambar di bawah ini :

Semoga bermanfaat dan selamat mencuba.

Kredit buat guru maya saya : El Telu