Cara Membuat Menu Flash Menggunakan Dreamweaver (2) - untuk Blogspot

Posted by Unknown on 5/08/2009
44 komentar
This item was filled under , ,

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.

  1. Buka kembali file "menu_flash.html" dengan menggunakan program Dreamweaver pada komputer Anda.
  2. Jika Anda masih berada pada layar Design, silahkan berpindah ke layar Code untuk melihat code HTML dari flash menu yang telah kita buat.
  3. 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.
  4. 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.
  5. 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.
  6. 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
  7. Sekarang buka blogger.com, kemudian login untuk masuk ke dalam akun blogspot Anda.
  8. Klik link Tata Letak kemudian pilih sub tab menu Edit HTML
  9. 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.
  10. Beri centang pada kotak kecil disamping tulisan Expand Template Widget.
  11. 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>
  12. Copy paste stuktur HTML dari menu flash yang ada pada langkah 6 tepat di bawah kode yang Anda temukan pada langkah 11 di atas.
  13. Klik tombol SIMPAN TEMPLATE
Silahkan klik di sini untuk melihat contoh hasilnya. Jika masih ada langkah yang belum dipahami, silahkan bertanya melalui kolom komentar ya..Saya tunggu loh.. :D

Bookmark and Share

POSTINGAN LAIN YANG BERHUBUNGAN :




Dapatkan Tutorial Website Via Email:
Setelah membaca artikel diatas, jangan lupa ngasi komentar ya...

44 komentar on "Cara Membuat Menu Flash Menggunakan Dreamweaver (2) - untuk Blogspot"



Post a Comment