Nah itu dia yang dinamakan Dropdown menu. kita umpamakan Products adalah menu utamanya sedangkan Product 1 dan Product 2 adalah submenunya. Submenu yang dapat menjorok kebawah dan dapat menutup keatas lagi itulah yang disebut dropdown menu.
Ok, apakah agan tertarik? kalau iya mari kita langsung coba praktek membuatnya. oh ya ada satu hal yang mau saya sampaikan, Blogger yang sekarang dan yang dulu sudah berbeda. apa bedanya ?
Tampilan Edit HTML Blogger Dulu |
Tampilan Edit HTML Blogger Sekarang |
1. HTML blogger yang dulu ada centangan Expand Widgetnya. dan warna kode seluruhnya masih hitam, jadi kalau terjadi kesalahan menuliskan kode sulit untuk dikoreksi.
2. sedangkan untuk HTML blogger yang sekarang, Expand Widget sudah dihapus diganti dengan panah-panah hitam kecil disamping kiri kode sebelah kanan nomer. dan seluruh kode berwarna, jadi kalau semisal agan salah menuliskan kode akan ditandai dengan warna merah.
Sekarang kita mulai saja membuat dropdown menunya :
1. masuk ke CSS Menu Maker
2. Pilih desain yang anda suka
3. Pilih Costumize, edit dropdown menu sesuai keinginan anda.
4. Masuk kebagian CSS, kopi seluruhun kodenya. kemdian kembali edit HTML blog agan
5. lalu paste kode yang telah anda kopi tadi diatas kode ]]></b:skin>
6. kembali lagi ke CSS Menu Maker, masuk kebagian HTML kopi juga semua kodenya
7. paste diantara kode <head> atau dibawah kode </header> atau yang semisal itulah pokoknya. lihat aja gambarnya biar jelas.
8. Setelah selesai "save tamplate". Menu dropdown agan sudah jadi
9. Untuk mengeditnya Ubah bagian ini :
<div id='cssmenu'>Keterangan :: - tanda "#" ganti dengan alamat web yang inginkan.
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li class='last'><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
- dan tulisan yang berwarna Orange ganti dengan nama menu yang anda inginkan.
apabila ada pertanyaan berikan komentar anda dibawah. Terima kasih
No comments:
Post a Comment