Mudah Membuat Efek Page Peel

Menyediakan ruangan khusus iklan (ads space) sepertinya sudah menjadi sebuah kewajiban bagi seorang blogger. Hal ini dilakukan seorang blogger untuk memberi kesempatan pihak lain memasang iklan diblog kita. Berbagai jenis iklan pun sering kita lihat, mulai dari jenis static image (gambar diam), dinamic image (gambar bergerak), banner rotator, dan masih banyak lagi cara para blogger dalam hal pemasangan iklan.

Kali ini MOTARO BLOG 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 MOTARO BLOG telah memasangnya pada Blog Kotretan Hendriono.

Screenshot dari 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 5
Letakan (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
Cari kode dibawah ini
]]></b:skin>
Langkah 7
Letakan (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 8
Cari kode dibawah ini
<body>
Langkah 9
Letakan (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
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, MOTARO BLOG tidak menjamin elemen tersebut selalu ada (klik kanan Save As).

* JQuery (JavaScript)
* Subscribe (Gambar Latar)
* PageFlip (Gambar Segitiga Hitam)

Sumber Artikel Sohtanaka.com