Buat Menu Dropdown Mudah Guna CSS Generator

As-Salam. Kadangkala ada banyak kategori dalam blog kita yang mahu pengunjung tahu, tetapi seperti tak cukup tempat je nak letak. Aha ... masalah seperti ini boleh anda selesaikan dengan menggunakan menu dropdown. Menu dropdown ini boleh anda gunakan untuk buat senarai kategori atau label, tak perlu lagi bersepah-sepah seperti awan (cloud) mahupun senarai panjang (listing).

Mungkin agak sukar bagi sesetengah blogger, tetapi jangan bimbang, sebab kini ada cara mudah dengan bantuan Dropdown Menu CSS Generator. Tak perlu susah payah, hanya copy kod yang diberikan dan tempek je dalam kod html blog anda. Ia merupakan satu kod CSS yang telah dibangunkan oleh Ryan Hellyer, yang banyak digunakan dalam blog wordpress.

Yang menariknya ialah ... anda boleh design sendiri bentuk dropdown menu anda, iaitu dari segi visual la.... contoh nak warna apa, link warna gelap ke, cerah ke. Banyak ubahsuaian yang boleh anda lakukan hanya dengan klik sana sini je. Memang mudah (kalau ikut HH la).

Buat Menu Dropdown Guna CSS Generator

• Pergi la laman sesawang ini - Dropdown Menu CSS Generator.
• Pilih template yang dah sedia ada (1 - Premade), ada macam-macam boleh pilih. Kemudian pilih bentuk dropdown yang anda mahukan (2 - Navigation). Kemudian jika mahu, kalau tak mahu pun tak apa ... boleh ubah setting untuk top level menu - iaitu menu pertama (3) dan kemudian ubah setting untuk level menu bawah, jika mahu (4).
• Klik butang - Submit Design (5).
• Hasil pelarasan, suntingan dan apa yang telah anda pilih dari langkah 1-4, anda boleh terus lihat di bahagian atas laman sesawang ini (6).
• Jika anda tak puas hati dan nak ubah, ulangi langkah samada dari 1-5 mahupun ubah sikit-sikit dari langkah 2-5 atau 3-5 atau 4-5 ... ikut kehendak dan citarasa terbaik anda.

Ok. Dah puas hati macam mana rupa bentuk dropdown menu anda yang telah anda buat tu, maka anda perlu lihat di bahagian bawah sekali dan nampak paparan seperti berikut:

Ianya adalah kod CSS yang telah siap dibuat untuk anda. Makanya, salin atau copy (ctrl-c) kod CSS tersebut, dan kemudiannya buka kod html blog anda.

Errr sebelum tu, jangan lupa backup dulu template yang sedang anda gunakan. Manalah tahu kot-kot tak menjadi kang... ye tak? Dah backup, maka cuba cari tempat nak letak kod CSS yang dah disalin tu. Sila klik expand html kod, dan cari tempat nak letak CSS tadi, iaitu di atas tag berikut - ]]></b:skin>

Dah jumpa ...paste (ctrl-v) je kod yang telah anda salin tadi. Jadi, dah siap langkah penting. Maka sekarang nak tambah menu yang anda nak. Hanya buka bahagian add widget dan tambah html. Guna kod html (contoh) dibawah ini untuk bina menu dropdown anda di blog.

<!--[if lte IE 7]>
<script type="text/javascript" src="http://pixopoint.com/wp-content/plugins/pixopoint-menu/scripts/suckerfish_ie.js"></script>
<![endif]-->
<ul id="suckerfishnav" class="sf-menu">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
  <li><a href="#">Link 4</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
</ul> 

Letak la kat bahagian mana yang anda mahukan ikut bentuk menu dropdown anda tadi. Jika nak gantikan menu asal blogspot pun boleh. Anda boleh baca di sini: Drop Down Menu Guide for Blogspot.

Selamat mencuba.