EFECT PAGE PEEL
(Kertas Lipat di pojok)
Mungkin sobat paenasaran dengan gambar diatas.
Untuk lebih jelasnya lihat demonya. klik disini.
Gimana tertarik, ikuti langkah langkah berikut sebelum itu backup template sobat untuk berjaga-jaga :
1. Login ke bloger
2. Edit tata letak
3. Edit html
4. Cari kode <head>
5. Copy kode ini dan letakan di bawah kode no.4
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({ //Animate and expand the image and the msg_block (Width + height)
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop() //On hover out, go back to original size 50x52
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop() //On hover out, go back to original size 50x50
.animate({
width: '50px',
height: '50px'
}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});
});
</script>
6. Cari kode ]]></b:skin>
7. letakan kode ini di atas kode no.6
#pageflip {position: relative;}#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;position: absolute;z-index: 50;right: 0; top: 0;background: url(subscribe.png) no-repeat right top;text-indent: -9999px;}
8. Cari kode <body>
9. Letakan kode ini di bawah kode no.8
<div id="pageflip"><a href="#"><img src="page_flip.png" alt="" /><span class="msg_block">Subscribe via RSS</span></a></div>
10. Save dan lihat hasilnya
Gimana.....
Jangan lupa tersenyumlah.
Salam senyum dariku.
Judul :
Efect Page Peel
Rating : 4.5
Ditulis Oleh : sy@ms
Rating : 4.5
Ditulis Oleh : sy@ms
Jika mengutip harap berikan link yang menuju ke artikel Efect Page Peel ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya
Copyright © 2011.
0 komentar:
Mention At Blogs
Silahkan berkomentar tentang artikel ini ... ?