Memasang Efek Page Peel di Blog

Wednesday, September 8, 2010

Memasang Efek Page Peel di Blog

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://feeds2.feedburner.com/arozaq>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

Jangan lupa untuk mengganti kode http://feeds2.feedburner.com/arozaq dengan nama feed kamu yang sesungguhnya. Setelah itu simpan perubahan di atas. Lalu lihat hasilnya.