Senin, 09 April 2012

Page Peel Efek menggunakan jQuery & CSS

Diposting oleh di 22.38 ·

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.pngadalah gambar bagian dalam (Setelah diklik) Sobat bisa ganti dengan gambar Sobat sendiri
ALAMAT FEED Sobatadalah alamat tujuan jika gamber tersebut diklik, Sobat bisa menggantinya dengan alamat FEED Sobat, atau apalah terserah. Silahkan kreasikan Sendiri

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)