pada pertemuan kali ini saya akan menerangkan bagaimana cara membuat efek page peel pada blog sebelumnya sudah pada tau belum apa itu page peel . iya page peel adalah efek ketika kita melayangkan pointer ke arah blog kita, akan ada efek lekukan dan pada kali ini saya akan jelaskan bagaimana cara memasang efek peel ini di blog sobat sialakn simak langkah-langkah di bawah ini.
1.silakan login ke dasboard blog anda .2.pilih design > edit html > dan letakan kode di bawah ini sebelum kode </head>.
3. copy dan paste kode di bawah ini sebelum kode </head>.
<style type="text/css">
img { behavior: url(iepngfix.htc) }
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvm9RLpgJnQ7OvXgnyFIFLqPPIOMFvWGGBNXY7Kthq0vAbIjD73Ub7ppblT1_ouK94D67ENP5vroVxpw3eG0J_QYa6CMgBWH3XGWGI7VylZBq1SM7cBM9U40vtUIT3auTBa6Fc8sAYvsXR/s1600/page+peel.JPG) no-repeat right top;
}
</style>
<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>
4. * anda juga bisa merubah url image gambar dengan gambar keingin anda pada url gambar yang berwarna merah
5. selanjutnya adalah cari kode <body> dan letakan kode di bawah ini setelah <body>.
<div id='pageflip'>
<a href='http://film-cast.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUb9LdgteKNL49LNmwDOQ4y_sSO4yNynetDNUM3-Wh9gCKsp-mhcPOe88ML0F_2IAh5AzI0ktO5TWIucJ6rUMmrRn-5Xig8M48cY4vohfKACU5P9eLNsnc5GbHvwdt9RTpfvplDi5rSGz/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
<a href='http://film-cast.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUb9LdgteKNL49LNmwDOQ4y_sSO4yNynetDNUM3-Wh9gCKsp-mhcPOe88ML0F_2IAh5AzI0ktO5TWIucJ6rUMmrRn-5Xig8M48cY4vohfKACU5P9eLNsnc5GbHvwdt9RTpfvplDi5rSGz/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
6. save dan enjoy
"selamat mencoba dan semoga berhasil"
Post a Comment