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