Halo semua, pada postingan kali ini, saya akan memberikan tutorial Cara Berpindah Halaman Tanpa Loading di Blog. Secara sekilas, efek ini mirip seperti Google AMP yang tidak menampilkan loading saat memuat halaman atau postingan.
Hal tersebut terjadi karena setiap konten telah disimpan di server Google sehingga pengguna tidak perlu meload halaman lagi. Namun itu hanya sebagai gambaran, cara kerja tutorial kali ini tidak disimpan melainkan menggunakan library @hotwired/turbo.
Dan untuk memasang @hotwired/turbo, kita membutuhkan layanan CDN yang bernama UNPKG. Tanpa basa-basi lagi, silahkan ikuti langkah berikut untuk pemasangan library dan CSS.
Cara Berpindah Halaman Tanpa Loading di Blog
- Masuk ke BLOGGER
- Pilih menu TEMA
- Pilih ikon tanda panah > EDIT HTML
- Tempel di atas <head>:
- Selesai.
<script async src="https://unpkg.com/@hotwired/turbo"/>
Setelah memasang @hotwired/turbo, semua tautan eksternal akan dimuat secara asynchronous. Untuk menandakan bahwa tutorial kali ini berhasil, setiap pemuatan halaman akan menampilkan progress bar di bagian atas halaman.
CSS Tambahan
Kalau tidak nyaman dengan tampilan progress bar yang tampil, kamu juga bisa menggunakan CSS berikut untuk mengatur tinggi progress bar, mengubah warna progress bar, atau bahkan menyembunyikan progress bar.
Tempel di atas ]]></b:skin> atau </style> .turbo-progress-bar{ height:6px; /* tinggi progress bar */ background-color:#009ee0; /* warna progress bar */ visibility:hidden; /* menyembunyikan progress bar */ }
Penutup
Silahkan membuka https://tinyurl.com/3sxjhwjy untuk melihat tampilan langsung. Selain itu, kamu juga bisa membuka halaman dokumentasi @hotwired/turbo di sini.
Cukup sekian artikel tentang Cara Berpindah Halaman Tanpa Loading di Blog ini, Terima kasih.