Apa itu page peel? Efek page peel adalah efek yang jika didekatkan mouse akan terlihat seperti halaman yang terbuka. Efek page peel ini adal...
Apa itu page peel? Efek page peel adalah efek yang jika didekatkan mouse akan terlihat seperti halaman yang terbuka.
Efek page peel ini adalah buatan Soh Tanaka (www.sohtanaka.com). Lalu bagaimana cara membuatnya?? mudah sekali, hanya beberapa langkah saja.
Masuk ke Tata Letak>Edit HTML, lalu letakkan kode berikut 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>
Letakkan kode berikut diatas tag ]]></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(URL gambar) no-repeat right top;
}
Ganti URL gambar
dengan URL gambar yang ingin ditampilkan setelah mouse didekatkan, usahakan gambar berbentuk segitiga (.png atau .gif) dan ukuran kanvas 307x308 pixel.
Kemudian letakkan kode berikut dibawah tag <body>
<div id='pageflip'>
<a href='http://blablabla'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Ganti teks warna merah menjadi URL yang dituju jika di-klik
Thank's to : http://www.orazatachi.co.cc
Efek page peel ini adalah buatan Soh Tanaka (www.sohtanaka.com). Lalu bagaimana cara membuatnya?? mudah sekali, hanya beberapa langkah saja.
Masuk ke Tata Letak>Edit HTML, lalu letakkan kode berikut 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>
Letakkan kode berikut diatas tag ]]></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(URL gambar) no-repeat right top;
}
Ganti URL gambar
dengan URL gambar yang ingin ditampilkan setelah mouse didekatkan, usahakan gambar berbentuk segitiga (.png atau .gif) dan ukuran kanvas 307x308 pixel.
Kemudian letakkan kode berikut dibawah tag <body>
<div id='pageflip'>
<a href='http://blablabla'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Ganti teks warna merah menjadi URL yang dituju jika di-klik
Thank's to : http://www.orazatachi.co.cc