Cara Membuat Blogger Berpindah Halaman Tanpa Loading

Cara Membuat Blogger Berpindah Halaman Tanpa Reload

Pada artikel kali ini, Masdhika akan berbagi tutorial membuat loading blog terasa lebih cepat. Kamu sering membuka Facebook, Twitter, Youtube? jika iya, situs diatas bisa kamu jadikan sebuah gambaran tentang tutorial kali ini.

Hal ini dikarenakan website tersebut menggunakan SPA (Single Page Application) yang memungkinkan perpindahan antar halaman tanpa loading.

Apa itu SPA? Menurut MDN Web Docs, SPA adalah implementasi aplikasi web yang memuat hanya satu dokumen web. Dokumen ini memperbarui isi konten menggunakan JavaScript API seperti XMLHttpRequest (Ajax) dan Fetch.

Nah pada artikel ini Masdhika akan membahas bagaimana cara agar blog tidak me-reload halaman layaknya website yang menggunakan SPA.

pada tutorial kali ini, kita akan menggunakan library @hotwired/turbo.

Cara Membuat Loading Blog Terasa Lebih Cepat

Memasang @hotwired/turbo

Untuk memansang @hotwired/turbo di Blogger, kita dapat menggunakan CDN seperti UNPKG. Jika kamu menggunakan Blogger, berikut caranya:

  1. Pastikan kamu sudah login di blogger.com.
  2. Selanjutnya klik pada menu Tema / Template.

    Untuk keamanan, lakukan backup template terlebih dahulu. Tema > Cadangkan > Download.

  3. Pilih Edit HTML
    Edit template blogger
  4. Lalu cari kode <head>, dan tempatkan Code di bawahnya
    <script async src="https://unpkg.com/@hotwired/turbo"/>

    Gunakan F3 atau CTRL + F untuk memudahkan pencarian

  5. Simpan, dan lihat hasilnya
  6. Code sudah terpasang.

    Untuk mengeceknya, silahkan buka website kamu.

Mengubah warna atau menyembunyikan progress bar (Opsional)

Setelah memasang @hotwired/turbo, saat kamu mengklik tautan external dalam blog kamu, maka halaman pada tautan yang kamu klik akan dimuat secara asyncrounus. Saat proses pemuatan halaman berlangsung maka akan muncul progress bar pada pada bagian atas halaman.

Kamu dapat mengubah bentuk dan warna dari progress bar ini dengan mengikuti langkah dibawah ini.

Mengubah warna atau ukuran progress bar

  1. Pilih Edit HTML, lalu cari kode ]]></b:skin>
    Edit template blogger
    Cari code di blogger

    Gunakan F3 atau CTRL + F untuk memudahkan pencarian

  2. Pastekan kode dibawah ini di atas ]]></b:skin>
    .turbo-progress-bar {
      height: 5px; /*ukuran progress bar*/
      background-color: yellow; /*warna progress bar*/
    }
  3. Simpan, dan lihat hasilnya

Menyembunyikan Progress Bar

  1. Pilih Edit HTML, lalu cari kode ]]></b:skin>
    Edit template blogger
    Cari code di blogger

    Gunakan F3 atau CTRL + F untuk memudahkan pencarian

  2. Pastekan kode dibawah ini di atas ]]></b:skin>
    .turbo-progress-bar {
      visibility: hidden;
    }
  3. Simpan, dan lihat hasilnya

Demikian cara membuat Blogger dapat berpindah halaman tanpa reload. Selebihnya kamu dapat mengunjungi halaman dokumentasi @hotwired/turbo di https://turbo.hotwire.dev/handbook/introduction. Contoh halaman blogger yang menggunakan @hotwired/turbo, silahkan lihat di https://template-blogger-bootstrap-2.blogspot.com/. Jika ada pertanyaaan silahkan ditanyakan pada kolom komentar.

Referensi
  • https://www.evetry.com/cara-membuat-blogger-pindah-halaman-tanpa-reload
Jangan menunggu menjadi sempurna untuk berani memulai, sebab kita sudah terlalu banyak menunda hanya karena takut gagal.
Dibuat oleh: Andhika Nanda
Dibuat pada: Januari 31, 2022
Diupdate pada: April 10, 2022
Label: Blogger

1 komentar

  1. Januari 31, 2022
    Mirip seperti loading adsense gitu ya mas?
Mari berkomentar dengan sopan, harap memberikan komentar sesuai postingan, dan mohon maaf dilarang menaruh link aktif, dsb. Terima Kasih sudah berkomentar :)