Dynamic Menu Button

Musim perayaan ni malas sungguh rasanya nak wat entry. Huhuhu.. makan lemang banyak sangat kot ni. Tapi korang jangan riso. Aku tetap menziarahi blog² korang walaupun blog aku tak update. Kali ni aku nak wat tutorial Dynamic Menu Button yang canggih sikit la. Dalam bahasa melayunye Buton Menu Dinamik. Lebih kurang la tu. heheh.. Tutorial ni adalah kesinambungan dari tutorial Button Menu yang pernah aku buat dulu. Tapi kali ni kita akan buat dengan menggunakan software. So, lebih mudah la korang nak customate mengikut kesesuaian blog korang. Kat bawah ni adalah contoh button menu yang akan kita buat. Sama je macam yang incik wanshah guna kat blog ni.

• Home
• Tutorial
  • Product 1
    • Description
      • Overview
      • General Info
      • License
      • Facebook
    • Buy Now
• Banner
  • Service 1
• About Me
• Photoshop
• Facebook

So, ape tunggu lagi. Jom terjah tutorialnye. hueheuhue..

Langkah 1:
Download software CSS Menu Generator melalui link dibawah ni.
http://wonderwebware.com/css-menu/cssMenuGenerator.exe

Langkah 2:
Setelah download, install macam biasa. Selepas install, icon seperti dibawah ni akan keluar dekat desktop. (Double-click utk bukak)

Langkah 3:
Setelah software tersebut dibukak, paparan seperti berikut akan dipaparkan. Double-click pada CSS DropDown Menu.

 

Klik gambar untuk besarkan.

Langkah 4:
Setelah double-click pada CSS DropDown Menu tadi, anda akan dibawa ke tab Customize. Disini anda boleh customize ciri² button menu yang anda nak. Contohnya anda boleh customize Color & Background, Font, dan juga struktur Menu. Lihat gambarajah dibawah ini.

 

Klik untuk besarkan gambar.

Keterangan:
Cth:- untuk menukar background menu, klik pada Menu Background, kemudian klik pada mana2 warna yang anda suka. Hasilnya akan ditunjukkan diruangan bawah seperti dalam gambarajah diatas.

Langkah 5:
Klik pada tab Font untuk menukar tulisan pada Button Menu anda. Pastikan pada Font-size anda menggunakan px. Supaya senang utk anda menganggarkan size tulisan.

 

Klik untuk besarkan gambar

Langkah 6:
Klik pada tab Menus untuk meletakkan link pada Button Menu anda.

Keterangan:
1. Klik pada Main Menu.
2. Pilih Menu/Button mana yang hendak anda letakkan link. Cth disini saya ingin letakkan link pada button Home.
3. Klik pada Edit.
4. Tulisan yang akan terpapar pada menu button anda.
5. Link yang hendak anda link kan. Perlu letakkan http. Kalau tak, link takkan berfungsi.
6. Klik Ok.


Langkah 7:
Klik pada tab Get the Files -> HTML/CSS Code: -> CSS Code.

Copy semua code didalam CSS Code bermula dari
/* pull-down mainmenu css */ -- sehingga--  /* end of mainmenu css */ (Gunakan Ctrl+C utk copy)

Langkah 8:
Login ke blogger.com. Pergi ke tab Design -> Edit HTML dan cari kod seperti dibawah ni(gunakan Ctrl+F)

   ]]></b:skin>

Kemudian pastekan code yang anda copy dari CSS Code pada langkah 7 tadi tepat² diatas code ini.

Langkah 9:
Pergi ke software CSS Menu Generator semula, dan buka tab seperti ini Get the Files -> HTML/CSS Code -> XHTML Code. Lihat gambarajah dibawah ini.

Copy semua code (Gunakan Ctrl+C) bermula dari

Sehingga


Langkah 10:
Pergi semula ke blog tab Design -> Edit HTML dan cari kod seperti dibawah ini:-

 <div id='content-wrapper'>

  <div id='crosscol-wrapper' style='text-align:center'>

  <b:section class='crosscol' id='crosscol' showaddelement='no'/>

 </div>

pastekan kod yang anda copy dalam Langkah 9 tadi tepat² selepas coding seperti diatas ni. Lihat contoh dalam gambarajah dibawah.

Selepas paste, Save Template dan tengok hasil button menu diblog anda. Semoga berjaya ye. Jika ada apa² masalah, boleh komen kat sini ataupun email terus ke wanshah87@gmail.com. =)

Yang Betul,