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....!
.jpg)
Tidak ada komentar