Tuesday, March 27, 2012

Page Peel Efek menggunakan jQuery & CSS

Ok lanjut, nah kali ini saya menemukan Page Peel terbaru buatan Sohtanaka.com dengan koding yang tentu saja sangat berbeda dengan kedua Page Peel diatas,  Sohtanaka tidak menggunakan setup koding yang rumit, jadi rekan tinggal langsung memasangnya saja dihalaman blog. Walaupun masih ada sedikit yang harus diedit, itupun hanya sekedar mengubah tampilan gambar dan link tujuannya saja. Bila dilihat sekilas, untuk style tampilannya hampir sama saja, dimana ketika kita mengarahkan mouse pada area PagePeel ini, maka akan terlihat halaman menggulung layaknya anda membuka selembar kertas dan menemukan halaman lain dilembar sebaliknya. Lihat demonya disini.


Cara Pasang:

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>

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;
}

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>

 
Silahkan disimpan dan lihat hasilnya. Ingat! Tampilan diatas hanya sebagai contoh saja ya, rekan bisa mengganti gambar dan link tujuan apa saja sesuai keinginan. Silahkan langsung dicoba :)
Facebook Comments
0 Blogger Comments

0 komentar:

Post a Comment

Terimakasih sudah berkunjung ^_^ , Tolong tinggalkan pesan atau komentar agar saya bisa berbenah :) dimohon untuk tidak SPAM dan LIVE LINK di blog saya :)

TERIMAKASIH ^_^