Cara Membuat Page Peel Effect di Blogger Tanpa jQuery

---

Efek lipatan kertas atau page peel adalah elemen kecil di sudut halaman yang akan terbuka ketika disentuh mouse. Dulu efek seperti ini cukup populer untuk menampilkan promosi, tautan khusus, pengumuman, sampai tombol menuju halaman tertentu.

Versi lama biasanya bergantung pada jQuery dan file JavaScript eksternal. Di versi yang kita pakai sekarang, mekanismenya dibuat lebih sederhana menggunakan CSS dan JavaScript native. Lipatan tetap berada di pojok halaman dengan posisi absolute, sehingga saat halaman digulir ke bawah efek tidak ikut menempel di layar.

Informasi Singkat

---

Generator di artikel ini membuat efek lipatan untuk pojok kiri, pojok kanan, atau keduanya. Posisi kanan memakai geometri lipatan sendiri agar gambar dan arah kertas tetap proporsional. Gambar di dalam lipatan tidak ikut diperbesar; yang membesar hanya area kertas dan bayangannya.

Cara Kerja Efek Page Peel

Konsepnya sebenarnya sederhana. Sebuah kotak kecil ditempatkan tepat di sudut atas halaman. Kotak ini berisi gambar promosi dan lapisan putih dengan gradasi yang membentuk ilusi kertas terlipat.

Saat pointer masuk ke area kecil tersebut, ukuran area lipatan berubah secara halus dari ukuran awal menuju ukuran terbuka. Setelah terbuka, area hover dibuat tetap sebesar kotak utama sehingga efek tidak menutup hanya karena pointer melewati batas antara gambar dan bidang lipatan.

Buka halusUkuran kertas bergerak dari kondisi aktual menuju ukuran maksimum.

Gambar tetapGambar promosi tidak ikut zoom ketika lipatan membesar.

Tidak fixedEfek menggunakan posisi absolute dan tertinggal ketika halaman di-scroll.

Kiri / kananSudut kanan memakai flip dari engine yang sama.

Page Peel Generator

Tidak perlu mengubah angka CSS atau JavaScript satu per satu. Setiap perubahan pada generator langsung diterapkan ke live preview, termasuk posisi kiri/kanan, ukuran, gambar, kecepatan dan animasi. Setelah tampilannya sesuai, klik Generate Code.

PENGATURAN

PosisiKiri AtasKanan AtasKiri + Kanan

Target Link

URL Gambar

Ukuran Awal

60px

Ukuran Terbuka

160px

Kecepatan

650ms

Delay Tutup

110ms

Alt Gambar

Animasi idle Link tab baru Aktif di mobile

LIVE PREVIEW

ABOUT   CONTACT   DISCLAIMER   PRIVACY

CodeFlare

Preview Efek Lipatan KertasArahkan mouse ke pojok atas.

Gambar tetap pada ukuran awal. Yang bergerak membesar hanya kotak lipatan dan bayangannya.

HASIL KODE

Cara Menggunakan Generator

1. Pilih posisi efek: Kiri Atas, Kanan Atas, atau Kiri + Kanan.
2. Masukkan alamat tujuan pada kolom Target Link.
3. Masukkan URL gambar yang ingin tampil di balik lipatan.
4. Atur ukuran awal dan ukuran terbuka. Nilai bawaan 60px dan 160px sudah cukup nyaman untuk kebanyakan layout.
5. Atur kecepatan animasi dan delay penutupan sesuai selera.
6. Setiap perubahan langsung terlihat pada live preview. Saat posisi diganti ke kiri, kanan, atau keduanya, kotak lipatan ikut berpindah tanpa perlu memuat ulang halaman.
7. Klik Generate Code, lalu Copy Code.

Catatan: gunakan gambar yang cukup sederhana. Detail yang terlalu kecil akan sulit terbaca karena ukuran gambar memang sengaja tidak ikut membesar saat kertas terbuka.

Cara Memasang di Blogger

Setelah mendapatkan kode dari generator, Anda bisa memasangnya melalui widget HTML/JavaScript atau langsung di template. Untuk pemasangan global, cara yang paling mudah adalah menggunakan widget HTML/JavaScript pada Tata Letak Blogger.

1. Buka dashboard Blogger dan pilih blog yang akan digunakan.
2. Masuk ke Tata Letak.
3. Tambahkan gadget HTML/JavaScript.
4. Tempel seluruh kode hasil generator.
5. Simpan, lalu buka halaman blog untuk mengetes efeknya.

Karena posisi efek memakai absolute dengan top:0, lipatan akan berada di bagian paling atas halaman dan tidak mengikuti layar ketika pengunjung melakukan scroll.

Sebelum Mengubah Template

---

Jika kode akan ditempatkan langsung di dalam template Blogger, buat cadangan tema terlebih dahulu. Dengan begitu Anda bisa mengembalikan template jika terjadi kesalahan saat penyuntingan HTML.

Tips Agar Efek Tetap Nyaman

Efek page peel sebaiknya digunakan sebagai aksen, bukan elemen yang mendominasi halaman. Ukuran awal sekitar 50–70px biasanya sudah cukup terlihat tanpa terlalu menutup header. Ukuran terbuka juga sebaiknya disesuaikan dengan isi gambar dan ruang kosong di bagian atas template.

Untuk link promosi, gunakan teks atau gambar yang jelas dan pastikan halaman tujuan memang sesuai dengan isi visual. Jika efek terasa terlalu aktif, nonaktifkan animasi idle dari generator. Pengguna masih dapat membuka lipatan secara normal dengan mengarahkan pointer ke sudut.

Engine baru ini tidak lagi memerlukan jQuery atau file JavaScript eksternal seperti versi lama. Semua kode yang diperlukan dibuat langsung oleh generator sehingga lebih mudah dipindahkan, disimpan, atau dimodifikasi.