Thursday, July 14, 2011

Membuat Page Peel Effect (Efek Lipat)

Tips berikut terbilang unik. Unik karena apabila sobat mengarahkan kursor mouse ke bagian pojok kanan atas pada suatu halaman website, maka secara otomatis setengah halaman tersebut akan terlipat (ibarat melipat buku yang belum selesai kita baca. gitu lho..hehe), selain itu pada halaman yang terlipat sobat bisa memasukan gambar, teks, link atau apapun sesuai keinginan kita. Patut dicoba nich.

Caranya :

1. Login ke blogger sobat. Kemudian klik > Rancangan > Edit HTML.
2. Jangan lupa download terlebih dahulu template anda untuk mengantisipasi terjadinya kesalahan sewaktu mengedit.
3. Centang Expand Widget Template.
4. Kemudian cari kode <b:skin><![CDATA[ (klik ctrl+F untuk mempercepat proses pencarian).
5. Copy-paste kode dibawah ini. Kemudian letakkan diatas kode <b:skin><![CDATA[.




6. Copy-paste kode dibawah ini dan letakkan diatas  kode ]]></b:skin>

#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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH_o86atBEK-whCOgC3td6St-0qBULYBG-MA47IRmdKw91txbb6Vxjo4SY4NaR76WWbIw76oNtk1IZAtXNodoj418rtnAjmKEERfEodZlG6hGeTs8jVt8k77yXWOE_FSkeXiw9fSeWAAuP/') no-repeat right top;
text-indent: -9999px;
}


7. Copy-paste kode dibawah ini dan letakkan dibawah kode <body>


<div id='pageflip'>
<a href='http://mariozoner.blogspot.com' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx3N7bp1Tj-yr3cjXo-hvicIdyxlj_V6weKD-oBPbY6BYCLoSFr3rZ12rUkqmcfSI2kOi6drkbEdYacrOtXAuvTbSkljkUprnCdFQ1pZypPFXax7eOcrtkAg_Ohrx_dU-UjDZipdqk_-X5/'/>
<span class='msg_block'/>
</a>
</div>

8. Kemudian klik SIMPAN TEMPLATE dan silahkan lihat perubahannya

Keterangan :
* Kode yang berwarna biru adalah link backgroundnya sobat bisa ganti dengan link gambar yang sudah sobat upload di internet
* Ganti kode yang berwarna merah dengan link gambar, teks, banner iklan atau link apapun yang sobat inginkan 


***Good Luck***



Related Post

0 comments:

Post a Comment

Mohon tinggalkan jejak/komentar sobat disini. Dilarang SPAM. Okey...