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....!
