Page Peel Efek menggunakan jQuery & CSS bisa Sobat kreasikan untuk dijadikan trik memasang iklan atau sebagainya, tapi pada tutorial kali ini saya mengikuti sumber aslinya saja dari Sohtanaka.com yaitu Page Peel Efek menggunakan jQuery & CSS yang berupa RSS.
Ricinya, Page Peel adalah effek seperti lengkungan kertas, jadi jika disorot cursos, secara otomatis akan membuka, seperti effek hover. contoh tampilannya seperti di sisi kanan kawan pada blog saya : tampilan setelah disorot :
dan untuk contohnya coba anda tengok ke pojok atas di sana ada halaman yang terlipat coba anda sorot dengan mous anda .....!!!!!!
Untuk cara membuatnya :
- Seperti biasa login blogger
- Rancangan
- Pilih Edit HTML,
- Letakkan kode berikuti ini di atas 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>
Selanjutnya letakkan kode berikut di atas 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;
}
untuk http://img222.imageshack.us/img222/9213/subscribe.png bisa diganti sesuai kebutuhan sobat semua..
selanjutnya letakkan kode berikut di bawah kode <body> :
<div id='pageflip'>
<a href='ALAMAT FEED Sobat'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
<a href='ALAMAT FEED Sobat'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
simpan template.... selamat mencoba.............
Terima Kasih
------------------------------------------------------------------------------------------
