7/16/2010

Page Peel Efek menggunakan jQuery & CSS

Page Peel Efek menggunakan jQuery & CSS - Sobat, tahukan apa maksud dari judul di atas ? Pasti banyak yang bingung kan . . . pertama saya juga bingung, tapi setelah saya pelajari baik-baik ternyata bisa, sukses besar.Akhirnya saya paham betul apa yang dimaaksud dengan judul di atas. Ini adalah salah satu pernak-perbik buatan, atau hasil karya Sohtanaka.com. Oh ya, artikel tentang Page Peel Efek menggunakan jQuery & CSS juga pernah dibahas oleh Master O-om. Jadi saya cuman napak tilas saja, hahahaha :)
Page Peel Efek menggunakan jQuery & CSS bisa Sobat kreasikan untuk dijadikan trik memasang iklan atau sebagainya, tapi pada tutorial kali ini saya mengikuti sumber aslinya saja dari Sohtanaka.com yaitu Page Peel Efek menggunakan jQuery & CSS yang berupa RSS.
Ricinya, Page Peel adalah effek seperti lengkungan kertas, jadi jika disorot cursos, secara otomatis akan membuka, seperti effek hover.
Yang masih bingung, seperti apa sih, lihat demonya di sini
Kalau mau preview gambarnya saja ,nih saya kasih,


Nah, langsung ke tutorialnya saja ,
  • Masuk ke blogger
  • Buka menu design/rancangan
  • Pilih Edit HTML,
  • Letakkan kode berikuti ini di atas kode <b:skin><![CDATA[ (Gunakan Ctrl+F untuk mencari)
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'> 
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;, 
height: &#39;319px&#39;
}, 500); 
} , function() {
$(&quot;#pageflip img&quot;).stop() 
.animate({
width: &#39;50px&#39;, 
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop() 
.animate({
width: &#39;50px&#39;, 
height: &#39;50px&#39;
}, 200);
});
});
</script>
  • Lalu letakkan kode berikut, di atas kode ]]></b:skin> 
#pageflip {
position: relative;
right: 0; top: 0;
float: right; 
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}
  • Lalu letakkan kode berikut ini di bawah kode <body> 
<div id='pageflip'>
<a href='ALAMAT FEED Sobat'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Note :
  • http://img222.imageshack.us/img222/9213/subscribe.png adalah gambar bagian dalam (Setelah diklik) Sobat bisa ganti dengan gambar Sobat sendiri
  • ALAMAT FEED Sobat adalah alamat tujuan jika gamber tersebut diklik, Sobat bisa menggantinya dengan alamat FEED Sobat, atau apalah terserah. Silahkan kreasikan Sendiri :)

Labels: ,