Pages

9

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

Alfiona

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

9 comments:

  1. UnknownMarch 24, 2012 at 9:04 PM

    kang aku pengen ganti gambar backgroundnya, gimana caranya?

    ReplyDelete
  2. UnknownMarch 26, 2012 at 6:19 PM

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

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

    ReplyDelete
  3. Toko SampingMarch 29, 2012 at 2:07 AM

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

    ReplyDelete
  4. AlfionaMarch 29, 2012 at 5:55 AM

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

    ReplyDelete
  5. gerai pelangsingApril 23, 2012 at 2:04 PM

    thanks infonya gan.

    ReplyDelete
  6. UnknownApril 24, 2012 at 7:06 PM

    terimakasih sekali buat maz felix akhirnya bisa juga hore hore hore

    ReplyDelete
  7. AnonymousApril 27, 2012 at 12:26 PM

    Today is good weather, isn't it?

    ReplyDelete
  8. DhidhiDecember 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 :)

    ReplyDelete
  9. AnonymousJune 7, 2013 at 2:08 PM

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

    ReplyDelete