Home » » Cara Membuat efek Page Peel

Cara Membuat efek Page Peel

Kali ini saya akan berbagi tips membuat efek page peel pada blog ,Apa itu page peel? Efek page peel adalah efek yang jika didekatkan mouse akan terlihat seperti halaman yang terbuka. berikut ini contoh efek peel:

Efek page peel ini adalah buatan Soh Tanaka (www.sohtanaka.com). Lalu bagaimana cara membuatnya?? mudah sekali, hanya beberapa langkah saja.

Untuk membuat halaman blog teman-teman seperti di atas caranya gampang. Ikuti langkah2 berikut:

1. Login ke blogger >> Tata Letak >> Edit HTML >> Expand widget template

2. Cari kode 
<b:skin><![CDATA
Letakan script code jQuery dibawah ini diatas kode  <b:skin><![CDATA

<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.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>


3. Lalu cari lagi kode

]]></b:skin>
Dan letakkan kode berikut tepat di atasnya:


#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://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}


4. Cari kode

<body>
Dan lettakkan kode berikut di bawahnya:


<div id='pageflip'>
<a href='http://feeds.feedburner.com/oktridarmadi' target='_blank'>
<img alt='' src='http://software2iqbal.files.wordpress.com/2009/11/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>

*Ganti yang berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS atau
link berlangganan.


5. Simpan hasil kerjaan anda.



Sekarang silahkan lihat blog anda, bagaimana....baguskan?


Untuk mengganti gambar dinding, teman-teman bisa mengganti URL berikut:

#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}

Semoga Bermanfaat []


Sumber Trik:[sohtanaka.com]



Artikel Terkait:

4 komentar:

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri