Diposting oleh
Cand Blogger
Kalo tidak salah dulu saya pernah nulis tutorial tentang iklan bergaya Page Peel ya? coba buka arsip dulu...nah ketemu :) oh iya ternyata ada 2 tutorial berbeda yang pernah di publish, yang pertama untuk tampilan menggunakan style Page Ear Javascript, trus..sama ini yang kedua Sexy Curls jQuery Plugin. Nah, buat rekan yang rada asing dengan istilah Page Peel, silahkan buka kembali arsip terdahulu pada kedua link diatas ya.
Ok lanjut, nah kali ini saya menemukan Page Peel terbaru buatan Sohtanaka.com dengan koding yang tentu saja sangat berbeda dengan kedua Page Peel diatas, Sohtanaka tidak menggunakan setup koding yang rumit, jadi rekan tinggal langsung memasangnya saja dihalaman blog. Walaupun masih ada sedikit yang harus diedit, itupun hanya sekedar mengubah tampilan gambar dan link tujuannya saja. Bila dilihat sekilas, untuk style tampilannya hampir sama saja, dimana ketika kita mengarahkan mouse pada area PagePeel ini, maka akan terlihat halaman menggulung layaknya anda membuka selembar kertas dan menemukan halaman lain dilembar sebaliknya. Lihat demonya Di blog bagian kanan atas
Cara Pasang:
Letakan script code jQuery dibawah ini diatas kode <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>
Kemudian letakan kode CSS dibawah ini diatas kode ]]></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/AVvXsEhjbNwggSlVQDlbzdOrE4TvzGc_HqK-DTpbR5wV0weDR2UgIUWM8XGo_iIiccRRIdqPNVJ6HU1LFdTw4am8SvYJex-atuG5sJhF-BswBpxoY1Ixcxob6kXpvjldQ93xTSWLEsjhwJ1VmCPd/s1600/devil.gif) no-repeat right top;
}
Letakan kode ini dibawah tag <body>
<div id='pageflip'>
<a href='http://candblogger.blogspot.com/'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Tinggal Simpan....
Url yang berwarna merah bisa sobat ganti dengan URL sobat atau dengan yang lainnya.
Untuk para master silahkan lewat saja.... :-)
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar
Please comment to this blog could be better.