hosting provider
« tulisan sebelumnnya
tulisan berikutnya »

Rolling Pages Animation On Your Blog

Rolling Pages Animation On Your BlogTulisan ini berawal ketika malam mulai beranjak pergi dan pagi sudah mengetuk pintu karena sang surya akan menampakan dirinya… bersama si mamat ngobrolin VCC akhirnya sampai ke coding

mamat_sedenk : bruno-calic-online.com

mamat_sedenk : di kanan atas

mamat_sedenk : apik banget jscriptnya

mamat_sedenk : bikinin tutorialnya dong :D

Dari permintaan tersebut, mulailah saya mencoba memecahkan masalah si mamat, setelah beberapa menit mencari sumber informasi, akhirnya ketemu sumbernya di http://www.webpicasso.de/ spontan saya langsung mengambil java script yang berada di sana dan ngoprek/membaca logikanya dan memodivikasinya sesuai keinginan saya pastinya setelah itu saya coba pasang di blog ini dan “ta da” berhasil, dengan hatigembira saya sampaikan ke teman saya si mamat “mat berhasil” dan diapun tersenyum manis, walaupun saya tak melihat tapi dapat saya pastikan dia sangat senang dan berkata :

mamat_sedenk : postingin dongggssss

dan terciptalah postingan ini

Cara Membuat Animasi : (sample , lihat kanan atas “Join Us”)

  1. download file berikut (bagian akhir artikel) yang telah saya modivikasi sedikit
  2. buatlah/edit 2 image untuk icon dan latar dengan rincian
      icon : 159 X 159 px
      background : 500 X 500 px
  3. simpan kedua gambar tersebut, yang nantinya akan di gunakan untuk icon dan background Rolling pages anda, di usahakan untuk menyimpan semua file yang di butuhkan dalam satu folder, agar nantinya mudah untuk pengalamatannya
  4. edit file java script rollingpage.js pada bagian
    * Konfiguration / Configuration
    - baris ke 13, 15, 18, dan 20 sesuai alamat file anda jpg dan swf anda,
    - ubah juga baris ke 31 dengan memasukan url yang anda inginkan pada saat rolling page di klik.
  5. upload folder beserta isinya ke webserver anda
  6. tambahkan code untuk load java script pada bagian header 
    <head>

  <script language="javascript" src="alamat_folder_anda/container.js"></script>

  <script type="text/javascript" src="alamat_folder_anda/rollingpage.js"></script>

</head>
  7. tambahkan code untuk eksekusi java script pada bagian body 
    <body>

  <script type="text/javascript">

    writeObjects();

  </script>

</body>
  8. jika sudah selesai melakukan tahapan di atas, sekarang saatnya anda membuka kembali website anda, jika tidak tampak perubahan, coba tekan ctrl+f5 untuk merefresh browser anda
  9. download semua code di sini

    Download Here


Sementara masih seperti ini dulu, kalo sempat di lain waktu akan di kembangkan menjadi plugin yang mudah di gunakan.
source : http://www.webpicasso.de/


Follow this blog


1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Loading ... Loading ...

Iklan Baris Gratis

post date : Sunday, January 6th, 2008 at 10:41 pm. on category : Ngalor Ngidul, Tips and Trick, Web Development. comment RSS 2.0 feed. leave respond here, or trackback.

32 Responses to “Rolling Pages Animation On Your Blog”

Berikan Balasan

CommentLuv Enabled
6,359 views