Saya akan membagikan kembali sebuah tutorial mengenai pembuatan menu untuk website. Kali ini yang akan saya paparkan adalah bagaimana cara membuat menu flash menggunakan Dreamweaver. Tutorial tersebut akan saya kupas pada bagian pertama yaitu postingan yang sedang Anda buka sekarang. Pada bagian kedua, saya juga akan menjelaskan langkah-langkah memasukkan flash menu tersebut ke dalam blog Anda yang di blogspot. Bagi pembaca yang mungkin baru mendengar tentang Dremaweaver, saya sarankan untuk membaca postingan mengenai Dreamweaver disini.
Berikut langkah-langkah yang akan kita lakukan untuk membuat menu flash dengan Dreamweaver:
Berikut langkah-langkah yang akan kita lakukan untuk membuat menu flash dengan Dreamweaver:
- Buka program Macromedia Dreamweaver dari komputer Anda.
- Buatlah sebuah dokumen baru dengan jenis misalnya HTML. Pilih menu File -> New, kemudian pilih kategori Basic Page dan gunakan tipe HTML.
- Simpan terlebih dahulu dokumen tersebut. Beri nama misalnya "menu_flash.html". Saran saya, simpanlah di dalam sebuah folder baru, beri nama folder misalnya "menu".
- Masuklah ke dalam layar design.
Pilih menu Insert -> Media -> Flash Button, maka akan muncul sebuah kotak dialog pembuatan tombol flash yang akan digunakan sebagai menu pada website.
- Sample. Menunjukkan preview dari tombol flash yang kita pilih.
- Style. Bentuk dari tombol yang kita bisa kita pilih. Sebagai contoh kita pilih "Slider".
- Button Text. Tulisan yang terlihat pada tombol. Sebagai contoh kita tulis "Home".
- Font. Jenis huruf dari button text.
- Size. Ukuran huruf dari button text.
- Link. Alamat URL yang akan dituju bila tombol menu flash tersebut diklik. Anda bisa memilih halaman/dokumen dari website yang sedang Anda desain pada komputer Anda dengan mengklik tombol Browse. Pada contoh ini kita akan me-link kan ke halaman luar misalnya: "http://www.banditbatak.com". Tuliaslah URL tersebut pada isian Link.
- Target.Untuk memilih target halaman ketika menu tersebut diklik.
- Bg color. Memilih warna background dari tombol flash yang sedang kita buat. Pilihlah transparent dengan mengklik tombol kecil yang berdiagonal warna merah.
- Save as. Nama file flash yang sedang kita buat. Simpanlah dengan nama misalnya "home.swf"
- Setelah semua dirasakan cukup dan benar, klik tombol Save.
- Pada dukumen kerja Dreamweaver akan muncul tombol flash menu yang telah kita buat tadi.
- Kita bisa menambah menu flash baru disamping menu Home yang telah kita buat tersebut. Misalkan kita ingin membuat menu lain yang letaknya sejajar dengan menu Home tersebut sehingga tampil secara horizontal. Terlebih dahulu letakkan pointer di sebelah kanan tombol flash menu Home, kemudian lakukan hal yang sama seperti membuat menu flash dengan nama Home tersebut dari langkah 5 -6. Sebagai contoh saya membuat menu flash baru bernama "Tutorial Website" dengan link : "http://tutorial-website.blogspot.com" dan saya simpan dengan nama "tutorial_website.swf". Hasilnya akan tampak seperti gambar di bawah ini.
- Di dalam folder "menu" yang Anda jadikan sebagai tempat menyimpan dokumen "menu_flash.html" tadi telah bertambah 2 buah file flash yang bernama home.swf dan tutorial_website.swf
- Buka kembali file "menu_flash.html" dengan menggunakan program Dreamweaver pada komputer Anda.
- Jika Anda masih berada pada layar Design, silahkan berpindah ke layar Code untuk melihat code HTML dari flash menu yang telah kita buat.
- Perhatikan gambar di bawah ini. Struktur yang yang dimulai dari tag <object>sampai </object> merupakan stuktur HTML untuk 1 buah tombol menu flash yang telah kita buat (menu Home). Agar lebih jelas, kode untuk 1 buah tombol menu flash tersebut adalah yang diberi pembatas garis warna merah tua pada gambar di bawah (baris 22-26). Selanjutnya, struktur yang serupa yang berada di bawahnya yang dimulai dari tag <object> sampai </object> merupakan kode HTML untuk tombol menu flash yang kedua menu (Tutorial Website). Kode-kode tersebutlah yang nantinya akan kita masukkan ke dalam template blogspot.
- Karena kita mendesain tombol menu flash tersebut pada komputer pribadi kita, maka kita perlu memasukkan terlebih dahulu file flash tombol menu yang telah kita buat tersebut ke internet agar bisa digunakan secara online. Pada folder "Menu" yang kita jadikan untuk dokumen Dreamweaver bisa kita lihat 2 buah file flash tombol menu, yaitu home.swf dan tutorial_website.swf. File flash tersebutlah yang harus kita upload ke internet. Anda boleh meng-upload ke server hosting mana saja.
- Sekarang perhatikan kode HTML untuk salah satu menu flash di bawah ini.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="147" height="34">
<param name="movie" value="file:///C|/Users/NESTORIKO/Documents/menu/home.swf" />
<param name="quality" value="high" />
<embed src="file:///C|/Users/NESTORIKO/Documents/menu/home.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="147" height="34" ></embed>
</object>
Kode yang diberi warna merah merupakan lokasi file flash tombol menu (menu Home) tersimpan pada komputer kita. Karena kita ingin menggunakan file flash yang telah kita simpan secara online, gantilah kode merah tersebut dengan URL file flash tombol menu yang telah kita hosting-kan. - Lakukan langkah 5 tersebut untuk menu lainnya, yaitu menu Tutorial Website sehingga kode keseluruhan untuk kedua menu flash tersebut adalah:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="147" height="34">
<param name="movie" value="http://domainhosting.com/home.swf" />
<param name="quality" value="high" />
<embed src="http://domainhosting.com/home.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="147" height="34" ></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="147" height="34">
<param name="movie" value="http://domainhosting.com/tutorial_website.swf" />
<param name="quality" value="high" />
<embed src="http://domainhosting.com/tutorial_website.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="147" height="34" ></embed>
</object>Ingat, ganti kode yang diberi warna merah dengan URL dari file flash tombol menu yang telah Anda hosting-kan
- Sekarang buka blogger.com, kemudian login untuk masuk ke dalam akun blogspot Anda.
- Klik link Tata Letak kemudian pilih sub tab menu Edit HTML
- Silahkan backup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa mengembalikannya kembali. Untuk melakukannya silahkan klik link Download Template Lengkap pada bagian Backup/Restore Template.
- Beri centang pada kotak kecil disamping tulisan Expand Template Widget.
- Carilah kode berikut pada template pembaca tersebut:
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div> - Copy paste stuktur HTML dari menu flash yang ada pada langkah 6 tepat di bawah kode yang Anda temukan pada langkah 11 di atas.
- Klik tombol SIMPAN TEMPLATE
- Buka kembali file "menu_flash.html" dengan menggunakan program Dreamweaver pada komputer Anda.
