CARA MEMBUAT PAGE PEEL EFFECT DI BLOG [HALAMAN BLOG BISA MELIPAT]

Banyak cara untuk membuat blog kita tampil cantik dan bagus, sehingga akan menarik simpati pengunjung dari blog sobat, salah satunya dengan cara ini, yaitu cara membuat halaman bisa melipatlayaknya seperti buku tulis. hehe :)

Kalau kita mengarahkan kursor mouse kita di bagian pojok kanan atas halaman blog, maka halaman tersebut akan kelipat atau kebuka.

Namun hanya sebagian kecil saja dan di dalamnya terdapat gambar (yang disesuaikan oleh pemilik blog) yang biasanya kalau di klikakan diarahkan ke suatu halaman lain seperti halaman RSS blog, Fans page Facebook ataupun bisa berupa halaman lainnya. :d :d :D

Nah, untuk cara membuatnya ikuti langkah - langkah di bawah ini :

Cara Membuat Page Peel Efek
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode <b:skin><![CDATA[, letakkan kode berikut di atasnya :

<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>

4. Lalu cari lagikode ]]></b:skin>, letakkan kode berikut di atasnya:

#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(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

5. Cari kode <body> dan lettakkan kode berikut di bawahnya:

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedkamu' target='_blank' >
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

5. Lihat dulu dengan cara Klik Pratinjau
6. Jika sudah selesai, Simpan/Save.
Kita dapat mengganti URL FEED blog kita atu URL gambar, kita dapat memodifikasinya sesuai dengan keinginan dan kreatifitas kita.

Sekian Dulu Posting Saya Malam Hari Ini

Salam AIRSHARE14 ^_^

CARA MEMBUAT PAGE PEEL EFFECT DI BLOG [HALAMAN BLOG BISA MELIPAT]

Related Post

1 komentar: