Latest News :

Home » » Page Peel Efek menggunakan jQuery & CSS

Page Peel Efek menggunakan jQuery & CSS

Jumat, 14 September 2012 | 0 komentar

Nah kali ini saya menemukan Page Peel terbaru dengan koding yang tentu saja sangat berbeda dengan kedua Page Peel lainnya, Ini 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.



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 :)
Share this article :
 
Support : Creating Website
Copyright © 2011. Nicko Part III - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger