Membuat Page Peels Effect

Page Peels Effect atau efek halaman yang bisa melipat sendiri secara otomatis pada bagian pojok atas halaman bila disorot menggunakan mouse adalah sebuah cara yang sering di gunakan pada website untuk pemasangan iklan dan tentunya sobat pasti sudah banyak yang tau tentang tutorial ini karena tutorial ini bukan hal yang baru lagi.
Cara membuat efek page peels ini cukup rumit dan ribet juga karena banyak kode-kode yang harus digunakan. Tapi buat sobat yang tertarik untuk membuatnya silahkan ikuti langkah berikut ini:

1. Login ke Blogger.
2. Klik Tata Letak.
3. Klik Edit Html.
4. Centang "Expand Template Widget".
5. Sekali lagi jangan lupa untuk men-download template lengkapnya sebagai back-up data.
6. Cari kode <b:skin><! [CDATA[ jika sudah ketemu letakkan kode berikut di atas kode tersebut:

<script src='http://code.jquery.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>

7. Lalu cari kode ]]></b:skin> dan letakkan kode berikut di atas kode tersebut:

#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://i696.photobucket.com/albums/vv322/Ad1_t/Posting/Logofeedburner.jpg) no-repeat right top;
text-indent: -9999px;
}

8. Selanjutnya cari kode <body> lalu letakkan kode berikut di bawah kode tersebut:

<div id='pageflip'>
<a href='http://feeds.feedburner.com/mpthreelyricsblogspotcom' target='_blank'>
<img alt='' src='http://i696.photobucket.com/albums/vv322/Ad1_t/Posting/Logofeedburner.jpg'/>
<span class='msg_block'/>
</a>
</div>

9. Klik tombol Simpan Template dan selesai sudah cara membuatnya silahkan klik link lihat blog dan lihat hasilnya.

Cara di atas hanya sebagai contoh. Sobat bisa mengganti url gambar dan alamat feednya silahkan sobat ganti dengan milik sobat atau link apapun yang sobat miliki.

Semoga bermanfaat dan selamat mencoba!

Sumber artikel: http://www.o-om.com

Aditya Blogs

Membuat Page Peels Effect

0 Response to "Membuat Page Peels Effect"

Post a Comment