Jumat, 18 Februari 2011

Cara buat efek Page Peel

Apa itu page peel? Efek page peel adalah efek yang jika didekatkan mouse akan terlihat seperti halaman yang terbuka.
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

<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:

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:


Diposting oleh Ichsan Saputra di 15.23
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Komentator Blog Ini