Efek Page Peel adalah Efek seperti lipatan kertas yang ada di pojok kanan atas blog, setiap di sorot oleh mouse akan terbuka lebar.
Langkah-langkahnya.
1. Letakkan kode skrip jQuery berikut ini di atas kode <b:skin><![CDATA[
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#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>
2. Letakkan kode CSS ini di atas ]]></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;
}
3. Letakkan kode ini di bawah tag <body>
<div id='pageflip'>
<a href='http://erickvand-blog.blogspot.com/feeds/posts/default?alt=rss>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Jangan lupa untuk mengganti kode http://erickvand-blog.blogspot.com/feeds/posts/default?alt=rss dengan nama feed kamu yang sesungguhnya. Setelah itu simpan perubahan di atas. Lalu lihat hasilnya.
1. Letakkan kode skrip jQuery berikut ini di atas kode <b:skin><![CDATA[
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#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>
2. Letakkan kode CSS ini di atas ]]></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;
}
3. Letakkan kode ini di bawah tag <body>
<div id='pageflip'>
<a href='http://erickvand-blog.blogspot.com/feeds/posts/default?alt=rss>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Jangan lupa untuk mengganti kode http://erickvand-blog.blogspot.com/feeds/posts/default?alt=rss dengan nama feed kamu yang sesungguhnya. Setelah itu simpan perubahan di atas. Lalu lihat hasilnya.
0 Response to "Cara Membuat Efek Page Peel di Blog"
Posting Komentar
Saya tidak online 24 Jam dan hanya sendiri mengurus blog ini, mohon maaf bila komentar anda tidak di balas.Mohon gunakan kata-kata yang sopan dalam memberikan komentar