Page Peel adalah efek yang memaparkan muka surat yang boleh di selak (page peel) yang biasanya di pasang pada penjuru kanan bagi sesebuah blog. Hanya dengan meletakkan kursor mouse pada penjuru page yang di lipat, layout blog akan terselak dan memaparkan imej yang di pasang di sebalik layout blog. Efek ini sememangnya amat menarik dan mudah untuk di buat. Contoh Page Peel boleh anda lihat di sini. Anda boleh menukarkan URL dan imej yang terpapar pada contoh tersebut kepada imej pilihan anda.
Langkah 1
p/s: Save dahulu script template sebagai backup.
Log in blog => Dashboard => Layout => Edit HTML. Seterusnya klik pada kotak Expand Widget Templates.
Dengan menggunakan keyboard, tekan Ctrl + F. Salin atau taipkan kod ]]></b:skin> dan seterusnya tekan Enter.
Langkah 2
Salin kod yang berwarna biru di bawah dan pastekan di bawah atau selepas kod ]]></b:skin> pada script template (rujuk langkah 1).
p/s: Anda boleh menukar image 'Page Subscribe' kepada image pilihan sendiri dengan menukarkan URL image yang di bold.
<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/AVvXsEj0HbXVDZ_LnKSaBuACoAq2NyijK9PV7A1XikEAeeoBy7J0ia39DY59kn2zDtfsvscEOQWca0lgCxjpTCnv1LbVkae7PkgCYN50vFCc3oCUjK9z8VauPBtkDyKqVs6NAQaOgMhFpFVuods/s320/PageSubscribe.png) 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>
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/AVvXsEj0HbXVDZ_LnKSaBuACoAq2NyijK9PV7A1XikEAeeoBy7J0ia39DY59kn2zDtfsvscEOQWca0lgCxjpTCnv1LbVkae7PkgCYN50vFCc3oCUjK9z8VauPBtkDyKqVs6NAQaOgMhFpFVuods/s320/PageSubscribe.png) 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>
Langkah 3
Dengan menggunakan keyboard, tekan Ctrl + F. Salin atau taipkan kod <body> dan seterusnya tekan Enter.
Langkah 4
Salin kod yang berwarna merah di bawah dan pastekan di bawah atau selepas kod <body> pada script template (rujuk langkah 3).
p/s: Tukar URL yang di bold dengan URL pilihan anda.
<div id='pageflip'>
<a href='http://larikudaku.blogspot.com/feeds/posts/default'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPbkRcsIqCfOOcLKBD1B1CmvKv4-5mGMaelkz-Q-_vRiHh2PFir-WT7ILfMg0wwhYSr3rf2_1jUIDAdF9h9LDQGuta1d2Yy9u_splOZtWQAeAzibi0ZCVCILtZJKhVJ6cYigx9sayd-wk/s320/pageflip.png'/></a>
<div class='msg_block'/>
</div>
<a href='http://larikudaku.blogspot.com/feeds/posts/default'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPbkRcsIqCfOOcLKBD1B1CmvKv4-5mGMaelkz-Q-_vRiHh2PFir-WT7ILfMg0wwhYSr3rf2_1jUIDAdF9h9LDQGuta1d2Yy9u_splOZtWQAeAzibi0ZCVCILtZJKhVJ6cYigx9sayd-wk/s320/pageflip.png'/></a>
<div class='msg_block'/>
</div>
Akhir sekali klik Preview. Jika tiada sebarang mesej error yang terpapar dan anda berpuas hati dengan hasilnya, klik saja Save.
0 comments:
Post a Comment