Kalo kamu sering berkunjung ke blogku, pasti menyadari ada sesuatu yang baru di blogku, itu lho yang ada di pojok kanan atas. Coba kamu gerakkan mouse kamu di atas logo RSS, apa yang terjadi? Tiba-tiba halamannya terbuka secara otomatis bukan? Nah efek ini yang dinamakan efek Page Peel. Saya dapatkan trik ini dari blognya O-Om.com. Menurut O-Om, trik ini menggunakan skrip yang dibuat oleh Sohtanaka.com. Kamu bisa melihat demonya di sini.
Kodenya sangat simpel, saya yakin semua orang bisa menerapkannya di blog masing-masing. Saya mencoba sekali dan langsung berhasil.
Gimana, kamu mau juga pasang ini di blog kamu? Yuuk, ikuti langkah-langkahnya.
Langkah 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>
Langkah 2:
Kemudian 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;
}
Langkah 3:
Lalu letakkan kode ini di bawah tag <body>
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedkamu>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Jangan lupa untuk mengganti kode namafeedkamu dengan nama feed kamu yang sesungguhnya. Setelah itu simpan perubahan di atas. Lalu lihat hasilnya di blog kamu. Oh ya, kamu bisa mengganti gambar dan link sesuai yang kamu inginkan. Selamat mencoba.
Source : O-Om.com
0 komentar:
Posting Komentar