Kemarin kita telah membahas mengenai
cara membuat menu flash menggunakan Dreamweaver. Bagi pembaca yang mungkin baru pertama kali berkunjung ke blog saya yang tidak seberapa ini, sangat saya sarankan untuk membaca terlebih
dahulu tutorial tersebut karena postingan ini merupakan lanjutannya. Silahkan
klik di sini
untuk membukanya. Sesuai janji saya, pada postingan ini yang merupakan
postingan kedua dari pembuatan flash menu, kita akan
membahas bagaimana memasukkan flash menu yang telah kita buat
memakai Dreamweaver tersebut ke dalam blog pembaca,
khususnya blogspot. Sudah dibaca tutorial membuat menu flash
menggunakan Dreamweaver bagian pertama tersebut? Jika sudah,
kita lanjutkan langkah-langkah memasukkan flash menu tersebut
pada blogspot.
- 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
ane gaptek gan blm ngerti pake tutor ini
ReplyDelete