Friday 14 June 2013

Cara Membuat DropDown Menu Blogger 2013

apa sih DropDown Menu itu ?


screenshot_13

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 ? 

Ceklist opsi Expand Widget Template di Blogger_thumb[3]
Tampilan Edit HTML Blogger Dulu
Ceklist opsi Expand Widget Template di Blogger_thumb[3]
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

Ceklist opsi Expand Widget Template di Blogger_thumb[3]










3. Pilih Costumize, edit dropdown menu sesuai keinginan anda.
Ceklist opsi Expand Widget Template di Blogger_thumb[3]













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>

screenshot_17














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.

screenshot_18










8. Setelah selesai "save tamplate". Menu dropdown agan sudah jadi
9. Untuk mengeditnya Ubah bagian ini :

<div id='cssmenu'>
<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>
Keterangan :: - tanda "#" ganti dengan alamat web yang inginkan.
                     - 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