Senin, 02 Maret 2009

CRAZY FLYING OBJECT

Hahahahh... judul yang ngawur tuh...... !! tapi mo dikasih nama apa lagi bro? emang pantesnya di panggil itu buat efek yang satu ini.
Berawal dari sebuah e-mail beberapa hari lalu yang menanyakan kepada saya tentang bagaimana cara membuat "Efek salju" bertaburan di blogger.
Ocre.... saya jawab pertanyaan itu di depan umum, tapi kali ini saya tidak akan membahas tentang efek salju bertaburan yang sudah ribuan kali dipasang oleh sahabat blogger di belahan bumi ini (cieehh ......gayanya).
Kali ini, tip's yang saya berikan adalah memberi efek "CRAZY FLYING OBJECT" yang sebenarnya tidak jauh berbeda dengan efek salju, hanya saja benda yang di tampilkan bergerak lebih liar dah tidak melulu hanya bergerak jatuh dari atas ke bawah saja tapi memantul setiap kali menyentuh batas layar monitor anda dan berjumlah 3 saja (karena kl kebanyakan bisa pusing liatinya)! bisa kalian lihat contohnya pada blog ini .

Nah kalau tertarik, silahkan anda Login ke blogger account anda==>Dashboard/dasbor==>Layout/tataletak==> Edit HTML, jangan lupa centang "EXPAND TEMPLATE WIDGET" dan Download template Lengkap sebelum meng-edit, buat berjaga2 jika terjadi kesalahan ocree ??

Langsung saja Copy kode dibawah ini :

<script type="text/javascript" src="http://www.geocities.com/andreas.fafandreo/moveobj.js"> </script>
<script type="text/javascript">

/***********************************************
* Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)
* Modified by : ANDREAS FAFANDREO
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2, flyimage3

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
flyimage1=new Chip("flyimage1",47,68);
flyimage2=new Chip("flyimage2",47,68);
flyimage3=new Chip("flyimage3",47,68);


//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");

}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

</script>

Lalu paste dibawah kode :

<head>

Kalau cari kode <head> susah, gunakan ctrl+F coy...biar gampang dan ga ribet !!

Nah, setelah kode diatas sudah dipaste dengan benar, sekarang tinggal Copy kode dibawah ini lagi :

<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="http://NAMA_BLOG_ANDA.com"><IMG SRC="http://URL_GAMBAR_ANDA.gif" BORDER=0></a>
</DIV>

<DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="http://NAMA_BLOG_ANDA.com"><IMG SRC="http://URL_GAMBAR_ANDA.gif" BORDER=0></a>
</DIV>

<DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="http://NAMA_BLOG_ANDA.com"><IMG SRC="http://URL_GAMBAR_ANDA.gif" BORDER=0></a>
</DIV>

Dan Paste di bawah kode :

<body>

Keterangan :

Kode Biru : isi dengan alamat blog anda

Kode Merah : Alamat/URL gambar anda (.gif, .png, .jpg)

Kode Kuning : Ukuran gambar/object yang akan ditampilkan (pixel)

Dan jika dirasa masih kurang banyak, jumlah object-nya bisa kalian tambahkan lagi sesuai kebutuhan, tapi kalau saya sih menyarankan menggunakan 3 saja sudah cukup !! ga usah terlalu banyak biar ga Katro'k dan Norak... ocre ?? bisa dimengerti ??

Nah.... kalau semua kode sudah di paste dengan benar.... sekarang tinggal langkah terakhir yang paling mudah diantara cara-cara yang lain, yaitu :

KLIK TOMBOL SAVE/SIMPAN PERUBAHAN... !

Dan lihat hasilnya saudaraku.......!!

Eiit's jangan seneng dulu ya ? karena biasnya blogger juga akan menolak kode2 diatas dan akan muncul pesan ERROR saat kita meng-klik tombol save/simpan perubahan!!

Dan bilamana hal itu terjadi.... maka kalian harus mem-PARSE kode-kode diatas dulu. dah tahu cara PARSE kan ? sudah pernah saya posting disini.

Trus pastekan Kode hasil Pare tersebut pada posisi yang sama .... O.K ?
Nah.. kayaknya sekarang dah ga ada masalah lagi... dan klik save/simpan perubahan !!
Dan lihat hasilnya........ !! keren mana dengan hujan salju hayoo???
Anda boleh meng-edit dan mengembangkan kode ini sesuka anda... bahkan anda juga boleh untuk menggunakan Foto pribadi anda untuk object-nya (tapi pose yang baik ya ??)!!
Selamat mencoba !!

6 komentar:

  1. Salam Kenal Sebelmumnya.....
    mas saya she oemar di Ciawi Tipar, Bogor Selatan.
    Tutorial Javascriptnya bagus-bagus dan sangat berguna sekali bagi she oemar yang masih belajar nge-Blog

    BalasHapus
  2. KEREN OMShttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif

    BalasHapus
  3. Kang mau tanya gimana caranya buat animasi di blog ini? seperti naruto atau tengkorak nya? trims jawabannya. tolong kirim kodenya ke email aku (yani_suryaningsih87@yahoo.com)

    BalasHapus
  4. susah banget , gak bisa2 :C

    BalasHapus

Silahkan tulis disini dengan santai dan tertawa2 !!