Kali ini Blogger Tune-Up akan mencoba membuat space iklan dengan Page Peel Effect (Page Flip) dengan teknik sederhana dan mudah. Page Peel Effect adalah space iklan yang sangat menarik, iklan akan tampil jika pengunjung mengarahkan mouse-nya pada sebuah gambar dan kemudian gambar tersebut akan bergerak membesar layaknya kita membuka halaman buku, dalam seketika gambar terbuka. Jika pengunjung meng-klik gambar tersebut maka pengunjung akan diarahkan pada halaman tertentu. Bergitulah kurang lebih Page Peel Effect (Page Flip), sebagai contoh Blogger Tune-Up telah memasangnya pada Blog Kotretan Hendriono.
Langkah pemasangan Page Peel Effect (Page Flip)
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini
<b:skin><![CDATA[
Langkah 5Letakan (copy paste) kode dibawah ini tepat diatas kode pada langkah 4
<script src='http://dedehendriono.googlepages.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#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 6<script type='text/javascript'>
$(document).ready(function(){
$("#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>
Cari kode dibawah ini
]]></b:skin>
Langkah 7Letakan (copy paste) kode dibawah ini tepat diatas kode pada langkah 6
#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://dedehendriono.googlepages.com/subscribe.png) no-repeat right top;
text-indent: -9999px;
}
Langkah 8position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://dedehendriono.googlepages.com/subscribe.png) no-repeat right top;
text-indent: -9999px;
}
Cari kode dibawah ini
<body>
Langkah 9Letakan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 8
<div id='pageflip'>
<a href='http://ebook-buzz.blogspot.com/' target='_blank'>
<img alt='' src='http://dedehendriono.googlepages.com/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Langkah 10<a href='http://ebook-buzz.blogspot.com/' target='_blank'>
<img alt='' src='http://dedehendriono.googlepages.com/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Preview Blog untuk melihat hasilnya...
Langkah Modifikasi (Penyesuaian)
Perhatikan Langkah 9! Ubahlah link (warna biru) dengan link yang akan kita arahkan.
Elemen Page Peel Effect (Page Flip)
Perhatian! Simpanlah elemen berikut pada web hosting anda, Blogger Tune-Up tidak menjamin elemen tersebut selalu ada (klik kanan Save As).
Sumber Artikel Sohtanaka.com
