45 Cara Membuat Page Peel Effect Untuk Blogger Dengan JQuery

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Salam sobat blogger. Pada postingan kali ini saya ingin berbagi lagi cara membuat page peel effect untuk template blogger. Apa yang dimaksud dengan page peel effect? Sobat pernah mengunjungi suatu blog dan ketika krusor atau pointer menunjuk kesudut kanan atas blog, tiba-tiba halaman tersebut terlipat? Seperti contoh image berikut:

Sebelum tersentuh pointer:

image 

Ketika tersentuh pointer sudut halaman blog terlipat seperti image berikut

image

Nah berikut cara membuat page pell effect pada template blogger:

Seperti biasa tentu dalam keadaan sign in pada account blogger sobat pada dasbor => Klik Tata letak=> Edit HTML=> Copy seluruh kode dari sini kemudian letakkan sebelum kode  </head>

Sekarang tambahkan kode berikut setelah <body>

<div id='pageflip'>
<a href='http://feeds.feedburner.com/Indahnya-Berbagi'><img alt='' src=http://sites.google.com/site/amatullah83/gambar-untuk-tutorialku/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

Selesai jangan lupa simpan template ya!

View Demo

Thanks to CSSRefleks.Com


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

45 komentar :

  1. wah ini baru keren, selalu ada kemajuan dan postingannya pun amat bermanfaat. thanks ya, smg terus menapak maju dlm merangkai.

    BalasHapus
  2. salut....
    makasih banyak sudah berbagi.

    BalasHapus
  3. kapan aku bisa utak atik HTML yah?

    BalasHapus
  4. ubaidur Rahman8 Januari 2010 02.48

    Sukses terus umi, nanda selalu doain umi tuk senantiasa mantap dlm karya.

    BalasHapus
  5. Wow, masya Allah......
    jangan bosan ya hadiain kita2 khazanah blogist, smg teman2 blogger benar dpt menimba mutiara yg penuh manfaat ini. Nawwerti Sysyasye

    BalasHapus
  6. wow keren sob..
    selalu ada post yang baru dan keren tentang tips blogger disini, thanks yah sob,, keep posting^^

    salam blogger:)

    BalasHapus
  7. uih,,mantab sekali ukhti..keren!!

    BalasHapus
  8. jadi betah belama lama di sini
    terimakasih ya

    BalasHapus
  9. @ narti: ukhty pasti jg bisa tp trll sibuk aja khn?
    @ 'ubaid: ??? emang dah bisa ngetik?
    @ all: terimakasih apresiasix

    BalasHapus
  10. wah,,blognya keren......


    keep bloging

    BalasHapus
  11. wow.. keren tu kak.. xixixi jd inget website jualan Ebook deh :)

    kapan2 Tia kopas ya kak :) makasih kak dah sharing.. semangat teruz :D

    BalasHapus
  12. @ cyntia: iya silahkan aja de'!

    BalasHapus
  13. Keren saudari, semangat terus....sip :D

    BalasHapus
  14. dulu waktu aq masih opakai template lama pernah nyoba, tp tak lepas lagi

    BalasHapus
  15. ya ini sharing aja, yg suka blh coba.

    BalasHapus
  16. kakaaaak,,kaLo aQ nunggu launching tempLate na kk,,aQ bLh pake kan nti bwt bLog aQ? hihi

    BalasHapus
  17. boleh de' knpa tdk? nah 7an anaa desain template khn biar bisa dipakai org bnyk... itulah hasil plg membahagiakn ketika karya kita dihargai. Bukan begitu?

    BalasHapus
  18. ilmu baru lagi neh buat aku.makasih sob ilmunya aku sedot dulu ya!!:))

    BalasHapus
  19. Bagus ya hasilnya...tp sayang, gak bs sy terapkan di blog saya, krn blog saya sdng dlm tahap diet KB...menghindari load lama...

    Terima kasih infonya

    BalasHapus
  20. iya blog OSI bnyk iklanx kali. td waktu anaa mau masuk jg loadingx lama mngkn krn koneksi jg lemot.

    klu u/script ini g' jg sih trlalu pngaruh loading page.

    BalasHapus
  21. Sip banget tutorialnya... ilmu yang 'dibagi di sini, menambah wawasan. Makluum... saya gak tahu banyak ttg template.. apalagi untuk prakteknya.. mudah2an setelah tahu tekhniknya, jadi bisa coba2. thanks ya..

    BalasHapus
  22. nice post
    sekalian saya mau tanya,
    kok tombol "lihat blog" sama "pratinjau" di blog saya hasilnya berbeda ya?
    trz gimana caranya agar blog saya sperti di pratinjau??
    mksh..

    BalasHapus
  23. asiik juga neh
    bisa menutup tulisan/gambar tertentu

    BalasHapus
  24. aq dulupernah pakai tp tah lepas lagi, keren sih mang cuma blogq dah berat bgt

    BalasHapus
  25. mbak itu teksnya bisa diganti g y ?
    dengan kemauan kita ?
    terus itu gambarnya bisa diubah g y ?
    terima kasih

    BalasHapus
  26. mantep banget nih...
    makasih banyak.
    Aku mau coba dulu ah...

    BalasHapus
  27. iya kak? jadi kapan dunk template kk yg ada tab slide nya itu bisa aqu n kami semua gunakan? kira-kira minggu dpn bisa gak kak? klo dah bisa tlg kabari ya kak ke blog sya,,tkutna gk bs blogwalking krn mulai malem ini mw belajar lgi buat UAS..doakan ya kak,,n jgn bosen2 ke blog aQ yaa :)

    BalasHapus
  28. salam,
    menarik sekali tips ini, terima kasih berbagi sabat.
    semoga sukses.

    BalasHapus
  29. mbak blog ini lumayan berat klo di load dengan HP.. Thanks

    BalasHapus
  30. @ widi: sama anaa waktu awal belajar blog jg gitu ukh, syukron.
    @ joe: sebagian widget yg kita pasang mmg seperti itu saat pratinjau error tp stlh disave tdk, exp recent post blogger
    @ kenshin: iya bisa edit aja url imagenya. terimakasih
    @ suci: insyaAllah de' smg sukses UASx
    @ ali: iya bnr

    BalasHapus
  31. @ oya lupa tuk yg lain yg g'smpat dibls satu persatu: terimakasih apresiasix

    BalasHapus
  32. Salam, thank untuk berbagi ilmunya semoga mendapat balasan yg lebih dari Nya.

    BalasHapus
  33. Betul - betul sobh, , . ini mantapz infonya. .
    mampir dunk. komentarnya ditunggu loh :D

    BalasHapus
  34. @ Sepwawan: Amiin. Terimakasih apresiasinya

    @ Ekoprasetyo: InsyaAllah. Terimakasih apresiasinya

    BalasHapus
  35. bos ga bisa kata nya Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "src". mohon pencerahanya..thx

    BalasHapus
  36. PAge peel emang keren sob....
    nice share and tutorial :)
    salam kenal allshare zone

    BalasHapus
  37. Balasan
    1. Silahkan dicoba, terimaksh kunjungan dan apresiasinya.

      Hapus
  38. mba mau nannya di blog saya gak ada body gimana nih ? :-s
    selain body bisa gak yang lain... ;((

    BalasHapus
  39. mba mau nannya di blog saya gak ada body gimana nih ? :-s
    selain body bisa gak yang lain... ;((

    BalasHapus
  40. INFO : Jasa Pembuatan Web dan Blog Murah untuk Bisnis, Toko Online, Iklan Baris, Instansi Pemerintah, Sekolah, Perusahaan, Personal, Lsm, Full Desain, Elegan, Bergaransi. Visit http://cybernetwebdesign.com

    BalasHapus
  41. kok body nya gada ya :( udah aku cari

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!