Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Page Peel Effect

Apa seh Page Peel Effect itu? Page Peel Effect adalah efek yang jika didekatkan mouse akan terlihat seperti halaman yang terbuka, atau juga seperti kertas yang tergulung di pojok. Dengan membuat Page Peel Effect yaitu dimana ketika kita mengarahkan mouse pada area Page Peel ini, maka akan terlihat halaman menggulung layaknya anda membuka selembar kertas dan menemukan halaman lain dilembar sebaliknya

Untuk membuat page peel efek ini ternyata tdak sulit, kita tinggal memasukan kode yang tidak rumit dan mengganti beberapa kode misalnya url gambar atau urla yang dituju. Yuk,,, langsung aja kita belajar bersama membuat Page Peel Effect :)


Cara Membuat Page Peel Efek
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Taruh (copy paste) kode berikut ini diatas kode <b:skin><![CDATA[

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

6. Kemudian letakan kode CSS dibawah ini diatas kode ]]></b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

7. Letakan kode ini dibawah tag <body>

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedkamu'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

8. Lihat Hasilnya (pratinjau) dan Simpan jika sudah selesai.
 Kita dapat mengganti URL FEED blog kita atu URL gambar, kita dapat memodifikasinyasesuai dengan keinginn dan kreatifitas kita. Selamat mencoba :)

17 komentar untuk "Membuat Page Peel Effect"

  1. PERTAMAX!!! kayanya mantep ni, coba dlu ah..
    maen ke blog ane ya.. arsfate.blogspot.com
    :D

    BalasHapus
  2. Manfaat..... Sip.
    www.dwicy.blogspot.com

    BalasHapus
  3. makasi info nya....bermanfaat...
    http://amiroktavia.blogspot.com/

    BalasHapus
  4. gan,klo ganti gambarnya gmna?
    ane nyoba pake punya agan terasa berat banget.klo buat gambar yang ada efek bayangan gitu gmna?atau yang bentuk jajargenjang,dan bersifat visible,jadi ga kotak z bentuk gambarnya.klo agan da waktu berkunjunglah di blog aku.barangkali dapat inspirasi blog juga ati-zone

    BalasHapus
  5. makasi aku dah berhasil, thank........

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. BAGUS BOS.....
    AQ JIPLAK YAH????
    liat blog aq juga bossss http:ustadzsugiatmoko.blogspot.com

    BalasHapus
  8. Dicoba Sob..
    Silakan berkunjung ke blog saya y..

    BalasHapus
  9. terima kasih alias matur nuwun.... =))

    BalasHapus
  10. thanks ni tutorialnya...semoga succesnya....

    BalasHapus
  11. bagus ni buat memasang iklan di blog

    BalasHapus

Berlangganan via Email