Cara Membuat Sub Menu Pada Blogger

Hei Kawan !

Assalamualaykum.

Kalau dalam entri yang lepas saya telah ajar kaedah membuat Menu Pages . Kali ini saya nak tambah satu lagi cara untuk membuat Sub-Menu pula. Menarik bukan??

Cara membuat Sub-Menu atau drop down menu di blog sebenarnya sangat mudah. Saya akan berkongsi cara membuat drop down menu yang bersifat horizontal. Menu ini boleh diletakkan samada  di bawah header, di atas footer, atau di mana saja dalam posisi horizontal (Melintang).

Bagaimana cara membuat menu drop down horizontal ini? Ok. Ikuti langkah-langkah tutorial di bawah :

1.  Pada dashboard, pilih bahagian Theme, kemudian pilih Edit HTML

2. Pada Kod html , cari kode ]]></b:skin> 

3. Kemudian kalau anda dah jumpa kod ]]></b:skin> , Tampalkan (Paste) kode CSS berikut ini tepat di atas kod tadi.

.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 boleh 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 background, 
• 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.

4. Cari kode <a expr:href='data:link.href'><data:link.title/></a> dan kemudian perhatikan kod <b:/loop> yang terdapat beberapa baris di bawahnya. 

5. Kemudian, sisipkan kod 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 anda membuat beberapa menu pull down, maka salin kode tersebut secara berulang di bawahnya kemudian lakukan penyesuaian setelah salinan dibuat dengan cara yang sama dengan sebelumnya.

6. Kelima, simpan template. Selanjutnya adalah contoh hasil dari penerapan dari teknik di atas adalah seperti yang terdapat pada gambar di bawah ini :