Pada tutorial script yang lepas iaitu memasang Peel-away ads di blogspot, ada yang tidak dapat mengapplikasikannya kerana tiada mempunyai hosting.Baiklah kali ini penulis akan menunjukkan peel away yang menggunakan hanya jQuery & CSS di dalam blog.Tutorial asalnya anda boleh layari di sohtanaka.com.Peel away ini berfungsi dengan gambar sahaja tanpa bantuan flash seperti mana pada tutorial yang lepas.
1) Login ke blog anda dan pilih Layout-->Edit html.
2) Copy kod script dibawah ini dan pastekan di atas kod <b:skin><![CDATA[
<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>
<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) Kemudian copy kod CSS dibawah ini dan pastekan diatas kod ]]></b:skin>
#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/AVvXsEj1FhFp_w_chF4y4mRRyreg1MWAaUkeE8JJaOMkoK9MRfvDRq8_WyeJGRlXB9XjkzoS9dKYOlT-dXE_wUkZ-8YWPkNK_CxalB3Q8jeY3FUTKHyy22Cl6o_W1_Ia1WvoGFjCquXoJZOb4LM/s320/subscribe.jpg) no-repeat right top;
}
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/AVvXsEj1FhFp_w_chF4y4mRRyreg1MWAaUkeE8JJaOMkoK9MRfvDRq8_WyeJGRlXB9XjkzoS9dKYOlT-dXE_wUkZ-8YWPkNK_CxalB3Q8jeY3FUTKHyy22Cl6o_W1_Ia1WvoGFjCquXoJZOb4LM/s320/subscribe.jpg) no-repeat right top;
}
4) Copy kod dibawah ini dan letakkan di bawah kod <body>
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/bloginfotips'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
5) Kemudian klik preview dulu.Jika tiada sebarang error, baru klik save.Lihat hasilnya.Pastikan anda tukar alamat gambarnya dan feedburnernya dengan kepunyaan sendiri.Terserah jika linknya hendak ke feedburner atau ke Url link yang lain.
Sekian...tutorial dari penulis tak akan lengkap jika tiada contohnya.Hendak lihat contohnya, layari melayuboleh-2u.Selesai.
Note: Jika anda telah mempelajari tutorial diblog ini dan berjaya diapplikasikan diblog anda, harap dapat beri kredit pada blog ini dengan hanya memberi sepatah komen.
Design by 
© 2008-2009 | Powered by
0 comments:
Catat Ulasan
Komenlah sesuka hati anda kerana tuan empunya blog ini buta hati dan buta perasaan tetapi tidak buta mata.