Sangat jarang sekali blog yang menggunakan Page peel effectsebagai penambah daya tarik blog. Page peel effect biasanya ditempatkan di ujung kanan atau kiri atas halaman blog. Dibalik lembar page peel yang dapat tersingkap (di buka) dimanfaatkan dengan diisi informasi atau image yang membuat pembaca blog penasaran sehingga tertarik untuk membukanya. Di dalamya juga disertakan sebuah link dalam bentuk link html atau yang lain.
Memebuat Page peel effect tidaklah sesulit yang di bayangkan, hanya saja Page peel dengan luas yang cukup besar membutuhkan gambar yang cukup besar pula sehingga tentu saja beban blog bertambah besar. Untuk menyiasati hal ini gunakanlah gambar/image yang tidak terlalu besar dan pilihlah file image yang sesuai (gif, png atau jpg) sehingga muatan gambar juga menjadi entheng.
Untuk membuatnya kita akan gunakan JQery-Latest.js, KODE CSS dan sedikit javascript tambahan sebagai pengembangan fungsi jquery-latest.js.
O..., ya..., kamu bisa juga melihat bagaimana sebenarnya yang dimaksud dengan Page peel melalui DEMO yang sudah saya sediakan.
Langkah pembuatan Page peel Animation:
1. Amankan template terlebih dahulu dengan cara:
Login ke Blogger --> Tata Letak --> Edit HTML -->
Download Template Lengkap --> Simpan di Folder PC
2. Tetap di Edit HTML. Cari KODE ]]></b:skin> (kode ini ada di atas KODE </head>) kemudian letakkan KODE CSS di atasnya sedang jQuery-latest.js dan javascript pendukung persis di bawahnya.
KODE CSS
#pagepeel {
position: relative;
right: 0; top: 0;
float: right;
}
#pagepeel img {
background:url(http://i49.tinypic.com/ev8j09.gif) no-repeat;
border:0;
width: 100px; height: 100px;
z-index: 99;
position: absolute;
right: 0; top:0;
-ms-interpolation-mode: bicubic;
}
#pagepeel .msg_block {
width: 100px; height: 100px;
overflow: hidden;
position: absolute;
right: 0; top:0;
background: url(http://i49.tinypic.com/2mr8gly.jpg) no-repeat right top;
}jQuery-latest.js dan javascript
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pagepeel").hover(function() {
$("#pagepeel img , .msg_block").stop()
.animate({
width: '487px',
height: '487px'
}, 2000);
} , function() {
$("#pagepeel img").stop()
.animate({
width: '100px',
height: '100px'
}, 2220);
$(".msg_block").stop()
.animate({
width: '100px',
height: '100px'
}, 2200);
});
});
</script>
3. Gunakan KODE HTML berikut di bagian body di antara tag <body> dan tag </body> (di bawah <body>).
x HTML
<div id="pagepeel">
<a href="http://gubhugreyot.blogspot.com" target="_blank"><img src="http://i48.tinypic.com/2prsb41.png" alt="" border="0"/></a>
<div class="msg_block">
</div>
Catatan :
1. Page peel ini disebuat Page Peel Animation karena menggunakan image dengan animasi gif untuk menciptakan animasi gerak pada page peel.
2. height dan width pada javascript (487px) menyatakan panjang dan lebar page peel yang dapat di buka.
width dan height yang lain untuk menciptakan effect lipat pada halaman yang paling ujung.
3. Modifikasi image yang ada untuk mendapatkan page peel yang sesuai dengan blog kamu!
.jpg)
Letakkan di sini Teks/Image/KODE HTML yang akan dipostingkan.
