Mungkin anda sudah pernah melihat iklan adsense yang dibuat Parallax seperti ini (sebenarnya namanya bukan parallax, saya cuma mendapatkan kata "Parallax" dari blog KompiAjaib... hehehe)
Sama seperti iklan adsense yang dibuat Parallax, footer yang dibuat Parallax terlihat jauh lebih unik, karena seperti "pintu garasi yang dibuka ke atas". Silahkan anda lihat gambar diatas untuk contohnya.
Bila footer anda memiliki height yang cukup tinggi, dengan menggunakan Parallax ini space di blog anda menjadi tidak terbuang sia-sia, apalagi yang anda buat parallax bukan berada paling bawah (seperti footer, tetapi diatasnya footer).
Langsung saja, berikut cara mendesain ulang footer anda supaya memiliki efek Parallax.
1. Mungkin langkah pertama ini cukup sulit bagi pemula, ada baiknya anda belajar apa itu HTML dan pengertian dasar tentang HTML terlebih dahulu.
2. Silahkan backup template anda terlebih dahulu guna menghindari hal-hal yang tidak diinginkan.
1. Pengecekan struktur HTML
Silahkan anda cek struktur dasar dari tag body di blog anda. Disini saya akan memberi contoh struktur umumnya yang seperti ini:
<body>
<header class='ini header'>...</header>
<div class='ini pembungkus postingan, dari isi postingan sampai sidebar (container)'>
<div class='ini div pembugkus postingan'>...</div>
<div class='ini div pembungkus sidebar blog anda'>...</div>
</div> <!-- Ini tag penutup dari container -->
<footer id='ini footer di blog anda' class='ini yang akan kita jadikan Parallax'>...</footer>
</body>
2. Persiapan tag pembungkus Parallax
Sekarang, mari kita tambahkan div master dengan class khusus sebagai "penutup" footer yang parallax nanti agar hanya muncul pada bagian bawah body. Caranya yaitu menaruh tag pembuka div masternya di atas container dan ditutup tepat diatas footer (lihat contohnya dibawah ini).
<body>
<header class='ini header'>...</header>
<div class='master-jarwo'> <!-- ini tag pembuka masternya -->
<div class='ini pembungkus postingan, dari isi postingan sampai sidebar (container)'>
<div class='ini div pembugkus postingan'>...</div>
<div class='ini div pembungkus sidebar blog anda'>...</div>
</div> <!-- Ini tag penutup dari container -->
</div><!-- Ini tag penutup dari master, tepat diatas footer -->
<footer id='ini footer di blog anda' class='ini yang akan kita jadikan Parallax'>...</footer>
</body>
Silahkan anda catat nama class footer anda yang ditandai dengan tulisan warna biru.
3. Pemasangan CSS mode Parallax
Setelah itu, masukkan kode CSS ini tepat dibawah kode
<head> beserta penjelasan disebelahnya.<style>
.master-jarwo {
background: #eee; /* Silahkan ganti #eee dengan kode warna background di blog anda */
z-index: 1; /* Hal ini berguna agar footer tidak terlihat sebelum sampai kebawah */
position: relative; /* Kegunaannya sama seperti z-index, tetapi tetap dibutuhkan */
}
.footer {
position: sticky !important; /* Agar footer memiliki efek Parallax */
bottom: 0 !important; /* Footer tetap menempel dibawah layar */
z-index: 0 !important; /* Agar footer tidak terlihat sebelum discroll sampai kebawah */
}
</style>
Silahkan anda ganti kode yang berwarna biru dengan class footer yang sudah anda catat tadi. Secara umum, hampir 90% template-template yang tersebar di internet menggunakan class footer (.footer) sebagai classnya, oleh karenanya saya menggunakan class yang umum itu.
Penutup...
Selesai! Sekarang coba anda lihat bagaimana hasilnya. Bila terdapat kesalahan atau error, silahkan anda beri tahu saya melalui kolom komentar dibawah, lalu lakukan backup pada template anda.
Parallax Footer ini 100% buatan KodeJarwo, saya dapat membuat kreasi desain web Parallax ini karena terinspirasi oleh Blog KompiAjaib dan RTD, terima kasih!