Membuat Page Flip (Peel Page)


Peel Page atau page flip adalah efek pada pojok sebuah web, seperti kertas yang tertekuk atau berlipat, dan akan terbuka jika didekati mouse. untuk lebih jelas silakan lihat dan coba pada pojok atas blog ini. Untuk cara membuatnya :
1. Download File yang dibutuhkan dan extract
Peel.rar


File ini berisi :
  • large.swf
  • large-cuss.jpg
  • peel.js
  • small.swf
  • small-cuss.jpg
2. Edit File gambar yaitu file yang bereksitensi .jpg, dengan menggunakan software pengolah gambar seperti photoshop, tanpa merubah ukuran asli gambar.

3. Upload file gambar dan .swf (large-cuss.jpg, small-cuss.jpg, large.swf, small.swf) pada hosting anda.
Note: dulu saya memakai hosting site.google.com. hanya saja peel page tidak dapat bekerja dengan baik jika saya tidak login ke google account. dan sekarang saya memakai 000webhost.com sebagai hosting

4. Buka dan edit File javascript, yaitu file peel.js dengan notepad, lalu cari kode dibawah ini
jaaspeel.ad_url = escape('http://feeds.feedburner.com/catatancuss');
jaaspeel.small_path = 'http://pahingdesign.comze.com/peel/small.swf';
jaaspeel.small_image = escape('http://pahingdesign.comze.com/peel/small-cuss.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://pahingdesign.comze.com/peel/large.swf';
jaaspeel.big_image = escape('http://pahingdesign.comze.com/peel/large-cuss.jpg');
jaaspeel.big_width = '650';
jaaspeel.big_height = '650';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;
Ganti kode yang berwarna merah dengan alamat gambar dan swf yang telah diupload tadi. khusus untuk kode berwarna merah yang paling atas, ganti dengan url atau alamat situs yang akan diakses jika mouse diklik. setelah itu save javascript ini dan upload pada hosting anda.

5. Pasang javasript (peel.js) pada web atau blog didalam header, sebelum </head> sebagai contoh
<script src='http://pahingdesign.comze.com/peel/peel.js' type='text/javascript'/>
Ganti kode yang berwarna merah dengan alamat javascript berada.

0 komentar:

Follow on Facebook