English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Jumat, 23 Maret 2012

Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect

Suatu ketika lagi ngenet tiba-tiba menemukan suatu web yang unik tampilan halamannya. Uniknya tuh kalau kita mengarahkan kursor mouse kita di bagian pojok kanan atas halaman web tersebut, maka halaman tersebut akan kelipat atau kebuka, namun hanya sebagian kecil saja dan di dalamnya terdapat gambar (disesuaikan) yang biasanya kalau diklik akan diarahkan ke suatu halaman lain seperti halaman RSS blog ataupun bisa berupa halaman lainnya.


Teman-teman juga bisa menemukannya di blog ini. Yang seperti ini lho...



UPDATE....




Untuk membuat halaman blog teman-teman seperti di atas caranya gampang. Ikuti langkah2 berikut:


1. Login ke blogger >> Tata Letak >> Edit HTML >> Expand widget template

2. Cari kode
<b:skin><![CDATA[
dan letakkan kode berikut di atasnya:

<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.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>





3. Lalu cari lagi kode
]]></b:skin>
Dan letakkan kode berikut tepat di atasnya:

#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/AVvXsEhB3vPJmcjvkg3lyUYF4lHyy-DeYbV-fJMZm21fQKl3AMP5X_Fpqr7pfcO9FvIv1OmXDMZ_CVzaWToIPIXrn5S35Q1NxYB1vwtJ_FKDZws9YGPzHLNBtoyhrK8RUlo-o-FmbpaDYMn3qKM2/) no-repeat right top;
text-indent: -9999px;
}


4. Cari kode
<body>
Dan lettakkan kode berikut di bawahnya:


<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=SeputarTrick&loc=en_US' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-THa8JjcrItgRknKD9xel994uguUqKZKm6H144ZiN6NkWMLpztPFSbpyxW56eARPlejuMVAdj4qFuYWxH4WR4RDpLHmA49qXkR8K6NwcHqmrCcHBX_BzM2D35QoXng0_TfvO65h8MumQ/'/>
<span class='msg_block'/>
</a>
</div>





*Ganti yang berwarna Hiajau dengan Link yang anda inginkan. Saran: Link RSS atau
link berlangganan.



5. Simpan hasil kerjaan anda.



Sekarang silahkan lihat blog anda, bagaimana....baguskan?
Untuk mengganti gambar dinding, teman-teman bisa mengganti URL berikut:


#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB3vPJmcjvkg3lyUYF4lHyy-DeYbV-fJMZm21fQKl3AMP5X_Fpqr7pfcO9FvIv1OmXDMZ_CVzaWToIPIXrn5S35Q1NxYB1vwtJ_FKDZws9YGPzHLNBtoyhrK8RUlo-o-FmbpaDYMn3qKM2/) no-repeat right top;
text-indent: -9999px;
}



Semoga Bermanfaat []


Sumber Trik:[sohtanaka.com]
Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect 9out of 10 based on 10 ratings. 9 user reviews.

Ditulis Oleh : Unknown Admin Tempat Berbagi Ilmu Untuk Sesama

Artikel Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect Ini Diposting Oleh Unknown Pada Hari Jumat, 23 Maret 2012. Terimakasih atas kunjungan Anda Serta Kesediaan Anda Membaca Artikel Ini. Kritik dan Saran Dapat Anda Sampaikan Melalui Kotak Komentar.

Comments
0 Comments

0 komentar

Posting Komentar

Sebelum dan sesudahnya saya ucapkan ribuan terimakasih kepada kalian yang telah berkunjung maupun berkomentar di blog saya ini.

Bagi Sobat yang ingin berkomentar tentang blog atau postingan saya,mohon jangan membuat SPAM