Cara Baru ! Membuat Efek Lipatan Kertas Halaman Blog

---

Efek lipatan kertas pada halaman web atau blog. Banyak situs web / blog menggunakan efek lipatan kertas halaman web (curl page peel web page) untuk menambahkan informasi tambahan seperti iklan sudut, tombol daftar rss feed, link halaman, tombol interaktif buku tamu dan lain sebagainya. Efek lipatan kertas pada halaman web juga merupakan salah satu trik untuk memberikan nuansa halaman web yang dinamis dan interaktif.

Efek lipatan kertas pada halaman web sudah cukup lama digunakan, walaupun bukan sesuatu yang baru namun efek lipatan kertas halaman web masih layak untuk digunakan dan masih tetap menarik dari perspektif tampilan efek halaman web.

Beberapa script atau kode efek lipatan kertas pada kebanyakan web atau blog yang memberikan tutorial untuk pemasangan efek lipatan kertas halaman web ini sudah tidak bisa digunakan dikarenakan situs-situs tersebut sudah tidak memberikan update dari kode efek lipatan kertas halaman web.

Oke, pada artikel kali ini saya mencoba untuk meng-update kode efek lipatan kertas sehingga bisa kompatibel dengan browser terbaru yang sudah mengimplementasikan kode CSS3 dan HTML5 dengan baik. Kode efek lipatan kertas halaman web yang saya update ini, memiliki beberapa penambahan fitur, yaitu antara lain :

• Penggunaan kode CSS untuk animasi gerakan efek lipatan kertas.
• Penggunaan kode JQuery agar bisa kompatibel dengan semua browser, kecuali IE.
• Optimasi kode script agar mudah disesuaikan dengan kebutuhan.
• Menggunakan perubahan class untuk pengaturan animasi pada kode HTML.
• Penggunaan efek box shadow untuk memberikan kesan nyata.
• Posisi penempatan efek lipatan kertas yang bisa langsung disesuaikan, bisa ditempatkan di pojok kiri atas atau pojok kanan atas atau bisa juga ditempatkan di kedua posisi.
• Ukuran lipatan kertas bisa dengan mudah disesuaikan dengan kebutuhan.
• Posisi penempatan bisa juga di dalam elemen HTML.

Penggunaan kode script html dan css efek lipatan kertas halaman web (page peel effect) sangat bermanfaat terutama sebagai penambah daya tarik pengunjung web / blog anda. Tampilannya yang eye-catching mampu membuat pengunjung web anda merasa penasaran sehingga bisa mendongkrak kunjungan link yang ada pada efek lipatan kertas tersebut. Selain link anda juga bisa menempatkan iklan dari sponsor halaman web anda.

Pemasangan efek lipatan kertas halaman web untuk digunakan di halaman web / blog anda sangat mudah dan bisa langsung diterapkan tanpa harus mengkonfigurasi ulang kode CSS atau kode Script. Buat anda yang tertarik memasang efek lipatan kertas ini silakan di baca tahapan-tahapan pemasangannya.

Informasi Singkat

---

Situs web (bahasa Inggris: website) adalah sekumpulan halaman web yang saling berhubungan yang umumnya berada pada peladen yang sama berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server web yang dapat diakses melalui jaringan seperti Internet, ataupun jaringan wilayah lokal (LAN) melalui alamat Internet yang dikenali sebagai URL. Gabungan atas semua situs yang dapat diakses publik di Internet disebut pula sebagai World Wide Web atau lebih dikenal dengan singkatan WWW. Meskipun setidaknya halaman beranda situs Internet umumnya dapat diakses publik secara bebas, pada praktiknya tidak semua situs memberikan kebebasan bagi publik untuk mengaksesnya, beberapa situs web mewajibkan pengunjung untuk melakukan pendaftaran sebagai anggota, atau bahkan meminta pembayaran untuk dapat menjadi aggota untuk dapat mengakses isi yang terdapat dalam situs web tersebut, misalnya situs-situs yang menampilkan pornografi, situs-situs berita, layanan surel (e-mail), dan lain-lain. Pembatasan-pembatasan ini umumnya dilakukan karena alasan keamanan, menghormati privasi, atau karena tujuan komersial tertentu.

Sebuah halaman web merupakan berkas yang ditulis sebagai berkas teks biasa (plain text) yang diatur dan dikombinasikan sedemikian rupa dengan instruksi-instruksi berbasis HTML atau XHTML, kadang-kadang pula disisipi dengan sekelumit bahasa skrip. Berkas tersebut kemudian diterjemahkan oleh peramban web dan ditampilkan seperti layaknya sebuah halaman pada monitor komputer.

Halaman-halaman web tersebut diakses oleh pengguna melalui protokol komunikasi jaringan yang disebut sebagai HTTP, sebagai tambahan untuk meningkatkan aspek keamanan dan aspek privasi yang lebih baik, situs web dapat pula mengimplementasikan mekanisme pengaksesan melalui protokol HTTPS.

---

Sumber : Wikipedia

Cara Pemasangan Pada Blogger

PERINGATAN

Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

1. Silakan anda login ke blog anda
2. Pilih Edit Template untuk memasukan kode dibawah ini ke dalam kode template blog anda.
   
   Kode Konfigurasi Penyesuaian
   
   
   <style>
   /* css size setting */
   :root {--curl-size:60px;}
   </style>
   <script>
   /* CodeFlare curl page v1.00 Configuration*/
   var curlBaseSize=60; /* Set curlBaseSize ==  --curl-size on css */
   /* ----------------------------------------------------------- */
   var curlHoverSize=curlBaseSize+100; /* suggest formula */
   var curlPosition='both'; /* left, right or both */
   var curlElmPos='body'; /* blank or Error auto set to body */
   var curlURLHostLeft='/p/contact.html';
   var curlURLHostRight=curlURLHostLeft; /* you can use different URL from left host */
   var curlImageLeftSrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikx7qs5WvP-4V49Wdyt3vPYRh2g69t2jI7dv4sRKcdG8Iz_lOhGgF2GrBfh2n__AwEzaEVq4Ac4eVorXeCwDvvzVXh_BQeGBtZn7S9_ovCx3cyI8wzgmvXas92e7mHOIIvavHdMZPMEvQ/s1600/special+offer+visitor+organic+ads.png";
   var curlImageRightSrc=curlImageLeftSrc; /* you can use different image from left image*/
   /* ------------------------------------------------------------ */
   /* Custom Image CSS */
   $(document).ready(function(){
   /* right custom css configuration*/
   $(".imgRightCurlcontent").css({'top':'-5px','right':'-5px','transform':'rotate(45deg)'});
   /* left custom css configuration */
   $(".imgLeftCurlcontent").css({'top':'-5px','left':'-5px','transform':'rotate(-45deg)'});
   });
   </script>
   <!--[if lte IE 8]>
   <style>
   .curl{display: none;}
   </style>
   <![endif]-->
   <link href='https://codeflareblogspot.github.io/code/CFPageCurlPeel_v102.css' rel='stylesheet'/>
   <script src='https://codeflareblogspot.github.io/code/CFPageCurlPeel_v102.js'></script>
   
   KETERANGAN
   #1 Pada kode :root {--curl-size:60px;} dan kode var curlBaseSize=60; merupakan kode untuk penyesuaian ukuran lekukan dasar kertas, pastikan keduanya memiliki angka ukuran yang sama.
   
   #2 Pada kode var curlHoverSize=curlBaseSize+100; merupakan kode untuk ukuran lekukan besar yaitu apabila mouse kursor berada pada link sehingga lekukan kertas bergerak membesar. Anda bisa menyesuaikan angka dari kebutuhan yang diperlukan.
   
   #3 Untuk penyesuaian yang lain bisa anda lihat pada keterangan kode yang dilampirkan pada setiap baris kode script.

Download Kode Sumber

Bagi anda yang ingin mempelajari struktur kode efek lipatan kertas halaman web (curl peel web page) anda bisa melihat kode sumber yang bisa anda download pada link di bawah ini. Berisi tiga file HTML di dalam file zip. Anda bisa membuka file HTML tersebut menggunakan teks editor sederhana seperti notepad atau wordpad.



This work is licensed under a Creative Commons Attribution 4.0 International License.

Incoming Search Term

Tutorial Cara Memasang Efek Lipatan Kertas, Cara Membuat Efek Tekukan Kertas Halaman Web, Ujung Halaman Hover Efek, Like Curl Page Effect With Animation, Curl Page Peel Effect With Animation, Simple CSS Hover Corner Page Peel Effect, Blog Kertas Sobek Pada Halaman Web, Cara Pasang Ujung Lipatan Kertas Pada Halaman Blog, Extreme Animation Using JQuery Page Flip Papper, Curl Flip Peel Website Page With Animated, Kode Script Efek Lipatan Ujung Halaman Web, Kode CSS dan JQuery Efek Lipatan Gulung Halaman Web Terbaru CSS3 dengan Animasi, Efek Page-Fold/Lipatan Kertas dengan CSS, Cara Membuat Efek Lipatan Kertas Pada Blog, Cara Mudah Membuat Page Peel Effect Untuk Blogger, efek lipatan kertas blogspot, Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog, Cara Membuat Efek Lipatan Kertas Pada Blog, Efek gulung lipatan untuk link url, Ujung Lipatan Kertas Dengan Animasi CSS, contoh animasi lipatan kertas pada halaman web atau blog