Anda ingin memasang page peel pada blog anda?Sebelum itu tahukah anda apa itu page peel,page peel adalah efek yang memaparkan muka surat yang boleh diselak dan biasanya dipasang pada penjuru atas kanan pada blog.anda semua boleh melihat demo disini.
Berminat?jom kita lihat cara-cara untuk memasangnya.tutorial ini dikreditkan kepada maribinablog
1)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.
2)Salin kod yang berwarna biru di bawah dan pastekan di bawah atau selepas kod ]]></b:skin> pada script template.
<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/AVvXsEjPIZrtGsOCNyQRcX3GAbrHCwiKXurzLQMOLEjjnQZfksylrmpQp0Is6kZkxLWmbcaKH3pUr21f8EdO3VpQLylIR4VhmKVlr1kYWMH5pkrVfAkNJTh9wH_DstEtUNcqa1pvqTKmzPN65TA/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>
3)Selepas itu,tekan Ctrl + F. Salin atau taipkan kod <body> dan seterusnya tekan Enter.
4)Salin kod yang berwarna merah di bawah dan pastekan di bawah atau selepas kod <body> pada script template.
nota: Tukar URL yang di bold dengan URLblog anda.
<div id='pageflip'>
<a href='http://mediasiber.blogspot.com/feeds/posts/default'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkdsIF0DLGYSXuO3QLeTZ7ckrbzh8CR2QNgxF77atLJSqPDURYk249c1BuDeb9iMi9PLAuUNwkjZDHZDrqIomAoraq-Pe3f4KUNvlKrDhKZDmlfU5ci7W2PSSjqqWwRn2LVJkDxEIoX8/s320/pageflip.png'/></a>
<div class='msg_block'/>
</div>
Powered by Blogger.
Related Post
Bagaimana Memasang Random Post WidgetWidget ini akan memaparkan tajuk-tajuk post anda secara rawak seperti dibawah Berikut adalah langkah-langkah untuk memas…
Bagaimana Memasang Recent posts floating bar widget di BlogspotAssalamualaikum kepada semua pengunjung blog mediasiber,Jika anda semua perasan dibawah sekali blog ini ada terpapar hot…
Memasang widget Recent comments dengan avatarMungkin anda sudah jemu dengan widget recent comment yang macam dibawah ini apa kata anda dengan recent comments yang in…
Tukar Cursor Dalam BlogMenggunakan default cursor asal mungkin agar membosankan,jika anda menukar cursor yang anda minati sudah tentu blog anda…
Cara Pasang Efek Zoom Pada GambarUntuk memasang efek zoom pada gambar,sebagai contoh gambar diatas(gerakkan cursor kebahagian gambar zoom diatas),caranya…

