Wednesday, October 12, 2011

PERCANTIK WEB DENGAN POP-UP MENU

Keberadaan dunia maya pada zaman sekarang ini sudah sangat tidak di herankan lagi , bahkan seseorang bisa menghabiskan waktunya hanya untuk dunia maya, chatting misalnya.

Pada saat ini sedang marak-maraknya jejaring-jejaring sosial yang ada di bumi kita tercinta ini. sebut saja facebook, twitter, dan  situs-situs jejaring sosial lainya yang sedang mendunia. penyampaian iklan secara cepat dan menarik sangat menunjang adanya dunia maya ini. selain cepat, harganya pun relatif murah. nah untuk menyampaikan iklan lewat dunia maya , banyak orang yang menggunakan layanan WEB! web ini sangat membantu seseorang dalam dunia bisnis dan semacamnya. agar iklan tersebut disukai dan diminati, perlu adanya desain web yang menarik.salah satunya dengan menggunakan pop-up yang akan membuat web kita lebih menarik dan ter-manage dengan rapi.

nah oleh karena itu saya akan mencoba untuk memberikan sebuah postingan dengan tema web design, yaitu membuat pop-up menu pada web anda.

Pada tutorial ini software yang saya gunakan diantaranya :
1.  Macromedia Dreamwaver MX 2004, sebagai aplikasi untuk merancang dan mendesain web.


2.  XAMPP, sebagai web server .

Pada postingan saya sebelumnya sudah dijelaskan mengenai cara membuat layout web dengan html, http://idrismk1.wordpress.com/2010/02/03/membuat-layout-sederhana-dengan-html/ . nah setelah anda mempunyai web dengan sebaik dan sekreatif mungkin, anda bisa mengedit menu nya di dreamwaver.


Baiklah langsung saja ikuti tutorial berikut ini :

1.   Buka aplikasi dreamwaver anda. lalu open web yang akan anda edit (yang berekstensi *.html atau *.php.)

2.  Setelah muncul akan tampak web anda pada jendela kerja design. lihat menu-menu anda. untuk contoh, web yang telah saya buat , didalam menu terdapat Home, Download, Buku Tamu, Kontak.


3. Nah saya pada kali ini akan memberikan pop ups pada Download. namun sebelum membuatnya yang anda harus lakukan adalah mengaktifkan tools "behavior". pilih window lalu behavior. atau dengan menekan tombol shift+F3.



Jika sudah aktif akan muncul tool behavior di sudut jendela kerja anda. seperti berikut :



4.  Oke saatnya membuat Pop-up menu pada menu download. klik download dan lihat kembali panel behavior anda. pilih add yang bertanda + lalu pilih "show Pop-Up menu".



5.  Akan muncul jendela Pop-Up menu. nah isikan sesuai keinginan anda. untuk keteranganya:



Nah jika ingin mengedit tampilan dari submenu anda , berikut keteranganya :
jendelapertama dari pop-up menu menampilkan tab content. padahal ada 3 tab lagi yang dapat di atur, yaitu :

1. tab appearance untuk mengatur  warna background, warna font, jenis font pada submenu anda.
2. tab advanced, untuk mengatur ukuran dari submenu anda. mengatur panjang, lebar,dst.
3. tab position, untuk mengatur posisi  submenu anda.



Jika sudah mengatur sebagus mungkin, kliK OK. nah pop-up menu anda sudah selesai dibuat. gampang bukan ? :D
Kemudian save dan mainkan di browser anda. tampilanya seperti berikut ini :



Semoga Bermafaat.

NB:  Bagi teman-teman yang merasa postingan kali ini bermanfaat dan membantu teman-teman sekalian. harap di komentar ya.hehe. Terima kasih.

12 comments:

  1. thx bgd bro artikel nya membantu bgd !!! trus berjaya !!!

    ReplyDelete
  2. krennn.

    makasih idris atas postingannya..
    sangat membantu bagi nusa, bangsa, dan negara..
    hhe~

    ReplyDelete
  3. driss...

    klo format menu na flash, tag bsa d bkin ya pop-menu na. ??
    mhon d jawab..
    scepatnya.

    ReplyDelete
  4. duh. sekedar info lagi.
    ternyata untuk flash n text ga bs d bkin pop-up menu.
    :D

    ReplyDelete
  5. apik gan, bisa buat tambahan di web ku!!!!!!

    ReplyDelete
  6. mari kita coba... thaxs share nya sob... btw yang udah jadi aja aga ya

    ReplyDelete
  7. Kalo di wordpress caranya gimana kang ??

    ReplyDelete
  8. baru tahu kalo di blog ada cara bikin pop up yang ternyata bisa bikin oke...tengkyu:D

    ReplyDelete
  9. wah gitu yach caranya... klo langsung wordpress.com kira-kira bisa opo gak yo. gak pake web creator maksudnya.

    ReplyDelete
  10. klo wordpress biasa alias grtis kykny ga deh mas.
    soalny kan gratis
    fitur trbatas.

    ReplyDelete