Menyisipkan Animasi Flash pada Blogger

Bismillah. Banyak cara untuk menyisipkan animasi flash (.swf) pada artikel di blogger. Sebenarnya tips-n-trik ini pernah dibahas pada artikel sebelumnya yaitu "Tampilkan Animasi Flash Pada Posting di Blogger" tetapi pada artikel tersebut proses embedded (menyisipkan) masih menggunakan teknik manual yang membutuhkan banyak script untuk dituliskan. Sedangkan sekarang kita akan menggunakan plugin swf object yang dibuat oleh deconcept agar proses penyisipan file animasi flash (.swf) tidak serumit yang pernah dibahas.

Demo Menyisipkan Animasi Flash

Langkah-langkah Menyisipkan Animasi Flash pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:

#animasiflash {
border: solid 1px #000;
width: 500px;
height: 300px;
margin: 10px;
}
#versiflash {
border: solid 1px #000;
width: 490px;
margin: 5px 10px;
padding: 2px 5px;
background-color:#7bc4df;
color : #000;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan kode dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='https://github.com/RonnyO/swfobject-compat/raw/master/swfobject1-5/swfobject.js'/>
<script type='text/javascript'>
// <![CDATA[
so.write("animasiflash");
var version = deconcept.SWFObjectUtil.getPlayerVersion();
if (document.getElementById && version["major"] > 0) {
document.getElementById('versiflash').innerHTML = "Flash Player versi "+ version['major'] +"."+ version['minor'] +"."+ version['rev'] +" terpasang.";
}
// ]]>
</script>

Langkah 7
Simpan template dan lanjutkan membaca ke langkah berikutnya...

Langkah-langkah Menyisipkan Animasi Flash (File .swf) pada Artikel Blog

Langkah A
Buatlah artikel pada kotak editor dan pada saat akan menyisipkan file animasi flash, pindahkanlah mode editor blog pada mode "Edit HTML"
Langkah B
Upload file animasi flash (.swf) anda pada hosting web anda dan copy link file tersebut, misal seperti dibawah ini:

http://hendriono.com/flash/engine-ignition.swf

Langkah C
Masukan kode dibawah ini pada editor artikel blog:

<div id="animasiflash">Upgrade Flash Player anda!!!</div>
<div id="versiflash">Anda belum memasang plugin Flash, atau browser anda tidak mendukung JavaScript (anda harus mengaktifkannya, mungkin?)</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("http://hendriono.com/flash/engine-ignition.swf", "Ignition System", "500", "300", "9", "#FFFFFF");
so.addVariable("flashVarText", "Ignition System pada mesin bensin untuk motor 4 langkah 4 silinder");
// ]]>
</script>

Langkah D
Terbitkan artikel anda dan preview artikel pada blog anda...

Source Code Menyisipkan Animasi Flash

Keterangan:
Perhatikan Langkah C yang diblok !

• Ubah link URL "http://hendriono.com/flash/engine-ignition.swf" sesuai link file yang anda upload pada hosting anda.
• Ubah "Ignition System" sesuai dengan judull animasi anda (ini bebas saja karena berfungsi sebagai "title" atau judul animasi).
• Ubah nilai "500" untuk menentukan lebar animasi flash yang akan ditampilkan dan nilai ini harus sama dengan nilai "500px" pada kode CSS (Lihat langkah 4).
• Ubah nilai "300" untuk menentukan tinggi animasi flash yang akan ditampilkan dan nilai ini harus sama dengan nilai "300px" pada kode CSS (Lihat langkah 4).
• Nilai "9" ini disesuaikan dengan kebutuhan versi Flash Player, jika anda animasi yang dibuat menggunakan Flash Player lebih tinggi dari 9 ubahlah sesuai kebutuhan, tapi jika file animasi flash yang digunakan dapat dimainkan dengan versi 9 biarkanlah kode ini tetap bernilai 9.
• Ubah kode #FFFFFF untuk menentukan warna latar pada animasi flash (gunakan "HTML Color Code" jika anda masih bingung dengan kode warna).
• Ubahlah "Ignition System pada mesin bensin untuk motor 4 langkah 4 silinder" sesuai dengan keterangan untuk animasi flash yang kita sisipkan pada artikel.

Alhamdulillah... Selamat mencoba dan semoga berhasil. Happy Blogging :)