0 Buat efek Page Peel menggunakan jQuery dan CSS

age Peel adalah effek seperti lengkungan kertas, jadi jika disorot cursos, secara otomatis akan membuka, seperti effek hover, Page Peel Efek menggunakan jQuery & CSS bisa Sobat kreasikan untuk dijadikan trik memasang iklan atau sebagainya, tapi pada tutorial kali ini saya mengikuti sumber aslinya saja dari Sohtanaka.com yaitu Page Peel Efek menggunakan jQuery & CSS yang berupa RSS.

Untuk Preview nya :

Sebelum disorot

Setelah disorot

Untuk pemasangannya silahkan ikuti trik di bawah ini:

1. Letakan script code jQuery dibawah 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>

2. Lalu letakkan kode berikut, di atas 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;
}

3. 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> 

Note :

* http://img222.imageshack.us/img222/9213/subscribe.png  --> adalah gambar bagian dalam (Setelah diklik) Sobat bisa ganti dengan gambar Sobat sendiri
* http://feeds2.feedburner.com/namafeedkamu --> adalah alamat tujuan jika gamber tersebut diklik, Sobat bisa menggantinya dengan alamat FEED Sobat, atau apalah terserah. Silahkan kreasikan Sendiri :)