Efek peel page adalah efek dimana ujung halaman melengkung ketika cursor mouse berada tepat diatasnya. Efek ini seringkali digunakan untuk menarik perhatian pengunjung mengklik gambar iklan dibalik lekungan halaman. Efek ini juga dapat digunakan untuk berbagai macam tujuan misalnya untuk mengarahkan pengunjung ke sebuah blog atau website.Efek ini seringkali digunakan untuk mempercantik dan memperindah blog. Ini adalah salah satu efek yang saya sukai dan saya merekomendasikan sobat blogger untuk mencobanya. Jika sobat ingin tau cara membuatnya ikuti langkahnya dibawah ini:
1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang pada Expand Template Widget
4. Kopi script dibawah ini dan letakan diatas kode <b:skin><![CDATA[
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/page_peel.js' type='text/javascript'/>5. Cari kode ini ]]></b:skin>
<script type='text/javascript'>
$(document).ready(function(){
$("#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>
6. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>
#pageflip {Keterangan:
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://3.bp.blogspot.com/-gdg7o8HCtqA/T547peqhuTI/AAAAAAAADPg/REelXg1UcHM/s220/DSC01465.JPG) no-repeat right top;
text-indent: -9999px;
}
- Kode berwarna merah adalah gambar latar belakang page peel. Sobat dapat menggantinya dengan gambar yang lain.
7. Letakan kode dibawah ini tepat dibawah kode <body>
<div id='pageflip'>Keterangan:
<a href='http://blogtrikdantips.blogspot.com/' target='_blank'>
<img alt='' src='http://2.bp.blogspot.com/-Wb14xiN0KPc/T7sJg5sldPI/AAAAAAAADS8/vtmXQM0CMuo/s400/page_peel_image.png'/>
<span class='msg_block'/>
</a>
</div>
- Kode berwarna biru adalah link yang akan mengarahkan pengunjung ke sebuah halaman (sobat dapat menggantinya)
8. Simpan template sobat dan lihat hasilnya
Selamat mencoba dan semoga berhasil....!
Artikel 
0 comments:
Posting Komentar
Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.