Headlines News :
Home » » Page Peel Efek menggunakan jQuery & CSS

Page Peel Efek menggunakan jQuery & CSS

Written By Unknown on Rabu, 11 April 2012 | 23.28

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 lu, atau apalah terserah. Silahkan kreasikan Sendiri
Share this article :

1 komentar:

NEBLO mengatakan...

nice post gan ,,'

Arsip

Komentar


Pengikut

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Кџ-мά-ђα дίηК - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger