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".

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

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

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

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.

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

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

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

Menggunakan CDN Staticaly Pada Thumbnail Related Post Dari DTE

Masih ingat cara agar related post DTE supaya support HTTPS?

Nah trik untuk mengubah protokol semua gambar related post DTE menjadi CDN Staticaly ini sama seperti merubahnya menjadi support HTTPS dan sebetulnya konsepnya sama seperti javascript kemarin yang untuk menggunakan CDN Staticaly dengan mudah secara otomatis pada semua gambar.

Javascript related post DTE itu tampak seperti berikut

Cara Mudah Menggunakan CDN Staticaly Pada Gambar Blogger Dengan Javascript

Yang membuat "HARUS" mencoba Staticaly Imgpx adalah bahwa layanan Staticaly Imgpx kini menawarkan dukungan tanpa batas untuk format gambar WebP. Fitur ini memberikan pengurangan ukuran hingga 34% untuk gambar yang disajikan dibandingkan dengan JPEG dari tingkat kualitas visual setara. Satu hal yang perlu diingat, WebP saat ini belum didukung oleh semua browser, salah satunya browser Firefox.

Memainkan Dua Sumber Video Atau Lebih Dalam Satu Elemen Video HTML5

Hal ini bisa dilakukan dengan bantuan javascript untuk memutar bagian pertama kemudian menyambung ke bagian selanjutnya sampai video selesai.

Berikut javascript-nya, silahkan simpan di atas kode