Blog Tutorial:Peel Effect/Efek Kupasan
Efek kupasan merupakan cara yang bagus untuk menarik perhatian pengunjung blog korang jika korang ada sesuatu nak tunjuk.Ia juga merupakan cara pengiklanan yang baik.Biasanya korang melihat iklan jenis ni kat dalam blog jenis wordpress tapi sekarang korang boleh gak guna pada blogspot,dengan bantuan javascript dimana hack ni berfungsi ke atas jquery dan css
Lihat Demo
*MAAF,DEMO TIDAK DIAKTIFKAN BUAT MASA NI*
(Cam biasa,backup dulu template korang!)
Log in ke dalam Blogger,
Pergi Ke Layout > Edit Html >Ctrl + F
Cari kod </head>
Dan tampal kod ni kat bawah dia
<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(http://www.wallheaven.com/subscribe.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(http://www.wallheaven.com/subscribe.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>
Ok,lepas tu,cari kod <body>,dan pastekan kod ni kat bawah dia
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/fitri'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
<a href='http://feeds2.feedburner.com/fitri'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
*NOTA TAPAK KAKI
Korang boleh gantikan kod yang warna hijau ngan gambar yang korang nak
Kod yang kaler merah pula,untuk korang letak alamat korang
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.