Cara Mudah Membuat Halaman Load More di Blog 100% Work
Selamat datang di Wahyu Development, kali ini saya akan membagikan tutorial bagaimana cara membuat halaman load more. Halaman load more adalah halaman untuk menampilkan artikel berikutnya tanpa harus reload halaman selanjutnya.
Keuntungan dengan menggunakan halaman load more adalah memudahkan pengunjung dalam melihat isi artikel pada website, dengan halaman load more juga pengunjung tidak perlu menunggu waktu reload halaman.
Disini saya akan menjelaskan secara detail agar mudah dipahami dan dipraktekkan dalam editing halaman load more, dan disini saya experiment menggunakan theme viomagz dari mas sunggeng. Ok langsung saja!
Script ini dikutip dari Igniel
Buka akun blogger anda --> klik Theme (Tema) --> klik Edit HTML. Pada halaman Edit HTML berikut hal-hal yang harus anda lakukan.
Pertama, cari code html
<head> biasanya code tersebut terletak diatas script atau anda dapat menggunakan CTRL+F untuk search code tersebut, jika sudah menemukan code tersebut letakan script dibawah ini sesudah code <head>.
Kedua, Hapus code css dari navigation tema tersebut, berikut bentuk navigation dari tema viomagz.
[Catatan] Jika code css berbeda anda tidak perlu khawatir, anda hanya perlu menghapus code css navigation mengganti dengan code css seperti dibawah ini, karena setiap tema memiliki bentuk css yang berbeda.
Hapus code tersebut dan ganti dengan code css berikut.
[Catatan] Warna pada kalimat Load More dapat anda rubah dengan mengganti code warna diatas example
Ketiga, carilah code html berikut dan ganti dengan code html load more.
[Catatan] Kalimat Load More dapat anda ubah sesuai dengan yang anda inginkan.
Keempat, yang terakhir ini adalah menambahkan script sebelum code
[Catatan] Pada script diatas terdapat dua Var, Var auto dan Var img.
[Catatan] Jika code css berbeda anda tidak perlu khawatir, anda hanya perlu menghapus code css navigation mengganti dengan code css seperti dibawah ini, karena setiap tema memiliki bentuk css yang berbeda.
Hapus code tersebut dan ganti dengan code css berikut.
[Catatan] Warna pada kalimat Load More dapat anda rubah dengan mengganti code warna diatas example
{background:#008c5f; color:#fff} atau {background:#ed4044}.Ketiga, carilah code html berikut dan ganti dengan code html load more.
[Catatan] Kalimat Load More dapat anda ubah sesuai dengan yang anda inginkan.
Keempat, yang terakhir ini adalah menambahkan script sebelum code
</body>, biasanya code tersebut terletak diakhir script tema, anda juga dapat menggunakan CTRL+F untuk mencarinya, jika sudah menemukan code </body> letakan script berikut sebelum code </body>.[Catatan] Pada script diatas terdapat dua Var, Var auto dan Var img.
- Var auto dapat anda rubah pengaturan load more, jika ingin secara otomatis load more halaman maka ubah menjadi true, jika ingin di klik baru load more maka ubah menjadi false.
- Var img adalah animasi load more, anda dapat merubahnya dengan animasi yang anda inginkan, dengan syarat harus menggunakan extensi .gif agar dapat berjalan dengan baik, dan buatlah animasi dengan size kecil agar tidak mengganggu speed page website anda.
Apakah anda mengalami masalah seperti ini?
Pada gambar diatas halaman load more tidak berfungsi, bahkan saat di refresh kalimat load more hanya berkedip dan akhirnya menampilkan angka kembali.
Hal ini karena tema anda sudah dipasang halaman next nomor sehingga mengakibatkan tabrakan pada script halaman load more, untuk membuat halaman load more berfungsi dengan baik adalah dengan menghapus code JQuery dari halaman next nomor.
[Catatan] Untuk mencari code JQuery halaman nomor gunakan CTRL+F dan masukan kata pada halaman nomor misalnya Next maka secara otomatis akan mencari kalimat yang berhubungan dengan Next. Terlihat seperti gambar diatas, sekarang anda hanya perlu menghapus code tersebut dari <script> ... </script> dan simpan tema maka halaman load more berhasil dipasang.
Itulah tutorial membuat halaman load more, semoga penjelasan saya mudah dipahami, jika terjadi kesalahan yang mengakibatkan tidak berfungsi silahkan komentar dibawah dan saya akan coba bantu. Terimakasih telah meluangkan waktu untuk membaca di Wahyu Development, semoga bermanfaat . . .
Situs download software lengkap dan mudah - Tutorial lengkap tentang website, sosial media, dan komputer - Sumber referensi tugas sekolah dan informasi lainnya
sangat informatif dan bermanfaat... salam blogwalking...
ReplyDeleteTerimakasih, senang bisa membantu anda 😊
DeleteLuar biasa hu artikelnya, mantul
ReplyDeleteTerimakasih mas sudah memberikan testimoni yang baik 👍
DeleteGan itu kok auto tanpa diklik load more
ReplyDeleteKalo biar diklik itu gimana?
Var auto ubah jadi false gan klo mw di klik, klo mw otomatis dibuat true, coba di baca ulang biar paham gan
Delete