Home » , , » Cara Membuat Flash Page Flip

Cara Membuat Flash Page Flip

Page Flip atau disebut juga Page peel adalah sebuah animasi sobekan atau lipatan halaman blog yang biasanya digunakan untuk menarik perhatian para pengunjung suatu blog atau website sehingga mengeklik objek tersebut dan Page Flip biasanya juga di Link-kan kehalaman RSS (link berlangganan email) dengan maksud untuk mengoptimalkan kerja RSS tersebut.


Untuk Cara Membuatnya Silahkan Sobat Simak Dibawah ini:
  1. Pertama Silahkan Sobat Login Ke Akun Blogger.
  2. Masuk Rancangan Dan Pilih Edit HTML.
  3. Bila HTML Editor Sudah Terbuka Silahkan Sobat Centang Expand Template Widget.
  4. Selanjutnya Cari Kode </head> Pada HTML Tempalte Sobat.
  5. Bila Sudah Ditemukan Silahkan Sobat Copy Kode Dibawah ini dan Taruh Tepat diatas Kode </head> Tersebut.

    <script type="text/javascript">var linkto ='http://feeds.feedburner.com/filiex'</script>
    <script src="http://filiex.16mb.com/jquery/pagefliper.js" type="text/javascript"></script>

  6. Ubahlah Kode Yang Berwarna Biru Dengan URL/Link yang Sobat Inginkan.
  7. Terakhir Simpan Template Dan Lihat Hasilnya.

Bila ingin mengganti Background Page Flip tersebut terlebih dahulu Sobat harus sudah paham cara menyimpan File JS Di Google Code atau Web Hosting dan buat Sobat yang sudah paham silahkan simak tutorial cara mengganti mengganti Background Page Flip tersebut Dibawah ini.

  1. Pertama Silahkan Buka Aplikasi Notepad Pada Komputer Sobat.
  2. Copy Semua Script Dibawah dan Paste kedalam Notepad yang telah terbuaka tadi.

    var jaaspeel = new Object();

    jaaspeel.ad_url = escape(linkto);
    jaaspeel.small_path = 'http://pahingdesign.comze.com/peel/small.swf';
    jaaspeel.small_image = escape('http://filiex.16mb.com/images/rss_mini.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://filiex.16mb.com/images/filiex%20rss.jpg');
    jaaspeel.big_width = '650';
    jaaspeel.big_height = '650';
    jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;

    function sizeup987(){
    document.getElementById('jcornerBig').style.top = '0px';
    document.getElementById('jcornerSmall').style.top = '-1000px';
    }

    function sizedown987(){
    document.getElementById("jcornerSmall").style.top = "0px";
    document.getElementById("jcornerBig").style.top = "-1000px";
    }

    jaaspeel.putObjects = function () {
    // <jcornerSmall>
    document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:0px;">');
    // object
    document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
    document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
    document.write(' id="jcornerSmallObject" width="'+jaaspeel.small_width+'" height="'+jaaspeel.small_height+'">');
    // object params
    document.write(' <param name="allowScriptAccess" value="always"/> ');
    document.write(' <param name="movie" value="'+ jaaspeel.small_path +'?'+ jaaspeel.small_params +'"/>');
    document.write(' <param name="wmode" value="transparent" />');
    document.write(' <param name="quality" value="high" /> ');
    document.write(' <param name="FlashVars" value="'+jaaspeel.small_params+'"/>');
    // embed
    document.write('<embed src="'+ jaaspeel.small_path + '?' + jaaspeel.small_params +'" name="jcornerSmallObject" wmode="transparent" quality="high" width="'+ jaaspeel.small_width +'" height="'+ jaaspeel.small_height +'" flashvars="'+ jaaspeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
    document.write('</object></div>');
    document.write('</script>');
    // </jcornerSmall>
    // <jcornerBig>
    document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:0px;">');
    // object
    document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
    document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
    document.write(' id="jcornerBigObject" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'">');
    // object params
    document.write(' <param name="allowScriptAccess" value="always"/> ');
    document.write(' <param name="movie" value="'+ jaaspeel.big_path +'?'+ jaaspeel.big_params +'"/>');
    document.write(' <param name="wmode" value="transparent"/>');
    document.write(' <param name="quality" value="high" /> ');
    document.write(' <param name="FlashVars" value="'+ jaaspeel.big_params +'"/>');
    // embed
    document.write('<embed src="'+ jaaspeel.big_path + '?' + jaaspeel.big_params +'" id="jcornerBigEmbed" name="jcornerBigObject" wmode="transparent" quality="high" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'" flashvars="'+ jaaspeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
    document.write('</object></div>');
    // </jcornerBig>
    setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000);
    }
    jaaspeel.putObjects();

  3. Kode yang berwarna hijau adalah url gambar mini dan kode biru adalah url gambar besar dan tugas sobat adalah mengganti kode tersebut dengan url gambar sobat sendiri.
  4. Lalu simpan Script tersebut dengan nama apa saja tapi extensi haruslah js dan sebagai contoh "pageflip.js".
  5. selanjutnya upload file JS tersebut ke Google Kode atau Web Hosting dan ambil Link/URL nya dan Gantikan Kode yang berwarna merah dengan Link/URL milik Sobat tersebut.
  6. Selesai dan lihat hasilnya.
  7. Goog Luck

Cukup Sekian Tutorial Blogger Kalini Dan Semoga Tutorial ini bermanfaat
filiex Artikel Oleh Filiex Boy dari filiex.blogspot.com, yang telah
Diterbitkan di 1:56 PM
Label: , ,
Jangan lupa berlangganan via RSS feed untuk artikel terbaru
Share this article :
Unduh Adobe Flash player

+ komentar + 9 komentar

March 24, 2012 at 9:04 PM

kang aku pengen ganti gambar backgroundnya, gimana caranya?

Terimakasih esabiwibowo atas Komentarnya di Cara Membuat Flash Page Flip
March 26, 2012 at 6:19 PM

iya Gan Cara nge Ganti Gambar/nge edit gambar nya gimana..??

Tolong penjelasan nya....?
Di Tunggu..

Terimakasih Moedjiib gunaOne atas Komentarnya di Cara Membuat Flash Page Flip
March 29, 2012 at 2:07 AM

wah keren gan,klo pake gambar gerak/gif ngga bisa gerak ya gan?
trims tutornya gan.

Terimakasih Toko Samping atas Komentarnya di Cara Membuat Flash Page Flip
March 29, 2012 at 5:55 AM

@Toko SampingSaya Sudah pernah pakai Gambar Gif dan gambarnya gerak kok!!

April 23, 2012 at 2:04 PM

thanks infonya gan.

Terimakasih gerai pelangsing atas Komentarnya di Cara Membuat Flash Page Flip
April 24, 2012 at 7:06 PM

terimakasih sekali buat maz felix akhirnya bisa juga hore hore hore

Terimakasih esabi wibowo atas Komentarnya di Cara Membuat Flash Page Flip
Anonymous
April 27, 2012 at 12:26 PM

Today is good weather, isn't it?

Terimakasih Anonymous atas Komentarnya di Cara Membuat Flash Page Flip
December 18, 2012 at 9:38 PM

kog punya saya ga bisa,. bole saya minta .xml ny bro??
tolong kirim ke dhidhiwicaksono@gmail.com
terima kasih sebelumnya :)

Terimakasih Dhidhi atas Komentarnya di Cara Membuat Flash Page Flip
Anonymous
June 7, 2013 at 2:08 PM

Template apa ya kamu guna untuk blog kamu..boleh bagitahu saya..

Terimakasih Anonymous atas Komentarnya di Cara Membuat Flash Page Flip

Post a Comment