Mengatasi Masalah Defer Offscreen Images Tanpa Jquery Atau Lazy Loading

Sebenarnya untuk mengatasi masalah Defer offscreen images dan Serve images in next-gen formats ini sudah ada solusinya. Namun karena keduanya perlu penanganan khusus dalam menyimpan kode HTML untuk gambar, maka banyak blogger yang mengabaikannya dengan alasan "ribet".
Padahal untuk edit gambar untuk mengikuti kedua cara tadi cukup mudah, namun karena "malas" maka hal tersebut jadi "susah".

Read More

Double Popup Banner Dengan CSS Dan Timeout Javascript

Sebelumnya saya sudah membagikan cara membuat popup banner dengan CSS Dan Timeout Javascript. Nah, kini saya membuat double popup banner yaitu popup ini berisi 2 buah banner dengan ditampilkan satu per satu.
Klik pada banner pertama akan memunculkan banner kedua. Saya rasa ini masih termasuk wajar, namun jika lebih dari dua banner mungkin dapat membuat kesal pengunjung.
Double popup banner ini

Read More

Membuat Fullscreen Halaman Blog Dengan Javascript

Mode fullscreen umumnya dipakai pada sebuah embed, misalnya embed sebuah video. Namun kali ini kita akan membuat mode fullscreen untuk sebuah halaman web.
Namun kita tidak bisa membuat fullscreen otomatis ketika halaman dibuka, karena saat ini browser akan mengabaikannya. Jadi fullscreen ini harus ada keterlibatan user dengan aksi mengklik sebuah tombol fullscreen, mudahnya dengan menekan

Read More

Membuat Scroll Indicator Dengan Javascript

Scroll indicator ini mungkin mirip dengan loading indicator yang sama-sama disimpan di atas blog dan persentasinya ditunjukan dengan warna yang akan semakin bergeser ke kanan jika halaman terus discroll ke bawah dan bergeser ke kiri jika halaman discroll ke atas.
Scroll indicator ini menggunakan javascript, hanya beberapa baris javascript dan tidak memerlukan Jquery Library karena ini pure

Read More

Menambah Dan Menghapus Class Pada Body Atau HTML Tag Dengan Javascript

body tag adalah tag terluar dari sebuah struktur HTML sebuah halaman web, dan HTML tag adalah tag terluar dari sebuah halaman web. Untuk itu, menambahkan class pada body maupun html dapat mempermudah melakukan tindakan pada elemen-elemen yang ada di dalamnya.
Menambahkan class pada body maupun html tag lazimnya dapat dilakukan dengan 2 situasi, yaitu dengan onscroll dan onclick event.

Read More

Membuat Popup Banner Dengan CSS Dan Timeout Javascript

Popup banner ini akan muncul setelah pengunjung beberapa detik membuka halaman, jadi ada waktu jeda kemunculannya setiap membuka atau merefresh halaman.
Dan tentu saja popup banner ini mudah ditutup untuk melanjutkan membaca konten dengan klik di luar banner atau pada tombol close.

Dan dengan ini kita dapat menambah penghasilan dari blog dengan menyediakan slot iklan popup banner. Banyak

Read More

Membuat Sticky Header Hide on Scroll Down dan Show on Scroll Up

Berbeda dengan tutorial sebelumnya yang membuat sticky pada menu yang berada di bawah header, kali ini kita akan memberikan efek show hide pada header yang sudah melayang. Untuk itu saya mencari cara yang hanya menggunakan CSS dan javascript, dan berikut caranya.
Jadi pada situasi awalnya, header sudah melayang dan menempel di sisi atas halaman seperti gambar berikut:

Pada header tersebut bisa

Read More

Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript

Untuk itu, untuk melangkapi tutorial yang ada di Kompi Ajaib, saya akan membagikan cara membuat fixed menu atau menu melayang dengan CSS dan Javascript.
Javascript yang digunakannya pun hanya beberapa baris saja dan tidak memerlukan Jquery Library sehingga sangat ringan untuk digunakan di blog.
Trik jenis ini sangat cocok untuk menu yang posisi awalnya berada di bawah header. Artinya, posisi

Read More