Page Peel Efek menggunakan jQuery & CSS Di Blogger
Kalo tidak salah dulu saya pernah nulis tutorial tentang iklan bergaya Page Peel ya? coba buka arsip dulu...nah ketemu :) oh iya ternyata ada 2 tutorial berbeda yang pernah di publish, yang pertama untuk tampilan menggunakan style Page Ear Javascript, trus..sama ini yang kedua Sexy Curls jQuery Plugin. Nah, buat rekan yang rada asing dengan istilah Page Peel, silahkan buka kembali arsip terdahulu pada kedua link diatas ya.
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
$("#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>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#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>
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;
}
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>
<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 :)
Posting Komentar