Cara Membuat efek Page Peel

Home » Tips Blogger » Cara Membuat efek Page Peel

Cara Membuat efek Page Peel

Kali ini saya akan berbagi tips membuat efek page peel pada blog ,Apa itu page peel? Efek page peel adalah efek yang jika didekatkan mouse akan terlihat seperti halaman yang terbuka. berikut ini contoh efek peel:

Efek page peel ini adalah buatan Soh Tanaka (www.sohtanaka.com). Lalu bagaimana cara membuatnya?? mudah sekali, hanya beberapa langkah saja.

Untuk membuat halaman blog teman-teman seperti di atas caranya gampang. Ikuti langkah2 berikut:

1. Login ke blogger >> Tata Letak >> Edit HTML >> Expand widget template

2. Cari kode <b:skin><![CDATA
Letakan script code jQuery dibawah ini diatas kode <b:skin><![CDATA

<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

3. Lalu cari lagi kode

]]></b:skin>

Dan letakkan kode berikut tepat di atasnya:

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}

4. Cari kode

<body>

Dan lettakkan kode berikut di bawahnya:

<div id='pageflip'>
<a href='http://feeds.feedburner.com/oktridarmadi' target='_blank'>
<img alt='' src='http://software2iqbal.files.wordpress.com/2009/11/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>

*Ganti yang berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS atau
link berlangganan.

5. Simpan hasil kerjaan anda.

Sekarang silahkan lihat blog anda, bagaimana....baguskan?

Untuk mengganti gambar dinding, teman-teman bisa mengganti URL berikut:

#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}