Welcome to my blog, hope you enjoy reading :)
RSS

Sunday, August 22, 2010

Cara Membuat Halaman yang Bisa Ngelipat Atau 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...





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(http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png) 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=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>

╬Anda bisa mengganti warna  Ijo 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(http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}

Semoga Bermanfaat []

13 comments:

  1. SUSAH GAN....
    http://www.infoteknonews.blogspot.com

    ReplyDelete
  2. wah ane berhasil thanks om buat ilmunya :-D

    ReplyDelete
  3. tlg gmn ya bt desain halmn blog,,,,

    ReplyDelete
  4. MUANTAB GAN...SEKALI COBA LANGSUNG TANCAP GAS...mathur Thangkyu buat pelajarannya.

    ReplyDelete
  5. gan, saya dah berhasil
    tapi RSS Subcribe yg keluar, gmn cara mengganti ny tu gan

    makasi

    ReplyDelete
  6. eh , blog saya kok html nya error , ngga bsa di edit lgi , trus jugaa saya sudah coba yg halaman browsingnya bsa gerak sendiri juga udah kok :)
    makasih yaa :)

    ReplyDelete
  7. sama2 sering2 mampir lagi y ke blog ane,,klau banyak kekurangan mohon dimaafkan,,namanya manusia,,,
    tapi bagi yang berhasil slmat dlu deh,,bagi yang belum jangan menyerah,,,,,,,,pasti bisa,,knpa org lain bisa,,itu ja yg prlu kaliaushakn,,,,

    ReplyDelete
  8. Wahhh...Asyik jadinya :D...mkasih yaa akhi.... :D

    ReplyDelete
  9. Muantaaaap buangeeet bray...
    terima kasih ya? Dan salam kenal dari aq

    ReplyDelete
  10. THANKS GAN

    kunjungi ini juga ya gan

    http://vhariet.blogspot.com

    ReplyDelete
  11. kl di blog sy tdk ada body
    gmn ya ???

    ReplyDelete

Maaf Bukan Bermaksud apa,impian relugais12 hanya ingin memberi tahukan,setiap anda yang membaca artikel di atas tersebut,wajib mengisi post komentar anda di bawah ini,karna itu lbih memudahkan saya untuk mencoba apa yang kalian komentar,,,,
pliiiizzzzsssss NO SPAM,^_^,NO PORN

Add 'Q y Sobat Sxli'n

SmSan Yukxs

Make Widget

Link Keren

free web site traffic and promotion membuat blog terlihat berarti Free Link Exchange membuat blog terlihat berarti

Ayo Kita nonton TV live

Photobucket