Home » , » Membuat Efek Halaman yang Melengkung (Page Peel)

Membuat Efek Halaman yang Melengkung (Page Peel)

Redi Apri Handoko | 05.33 | 0 comments
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'/>
<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>
5. Cari kode ini
]]></b:skin>
6. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>
#pageflip {
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;
}
Keterangan:
- 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'>
<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>
Keterangan:
- 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....!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Membuat Efek Halaman yang Melengkung (Page Peel) Di posting oleh Redi A.H pada 20 Sep 2009. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google