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>
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 :)
No comments:
Post a Comment