[ Desain Web ] Basic Pembuatan Efek Loading Page dengan jQuery - belajar jquery, jquery, jquery basic, jquery loading page, loading halaman, loading page, web design, desain web, tutorial, cara membuat, cara agar, tutorial blogger, tutorial wordpress, cara wordpress, tips wordpress, tips blogger, optimasi wordpress, optimasi blogger, blogspot, kekinian, tamvan, sitamvan, si tamvan, milenial
[ Desain Web ] Basic Pembuatan Efek Loading Page dengan jQuery - belajar jquery, jquery, jquery basic, jquery loading page, loading halaman, loading page, web design, desain web, tutorial, cara membuat, cara agar, tutorial blogger, tutorial wordpress, cara wordpress, tips wordpress, tips blogger, optimasi wordpress, optimasi blogger, blogspot, kekinian, tamvan, sitamvan, si tamvan, milenial

  28 Desember 2018     1004 Orang yang kepo!

SiTamvan.com - Back to basic! yes.. jangan dibikin ribet, kecuali dibikin asik.. ^_^ Silahkan dicoba, kode jQuery Efek Loading berikut ini untuk menambah Mood pengunjung jadi lebih asik..

Setelah 2 Hari yang lalu mimin sitamvan.com berbagi tutorial tentang Efek Fokus pada Elemen saat disentuh, nah kali ini mimin ingin berbagi Efek Loading saat pengunjung berpindah halaman!

Sebetul-nya tutorial ini sudah pernah mimin posting, di website mantan kangrian*com.. hanya saja, web-nya sudah tidak aktif seperti yang pernah mimin ceritakan disini.

Oke, buat Temen2 yang ingin coba Demo-nya.. silahkan klik menu-menu / navigasi website yang sudah mimin sediakan di website ini.

navigasi web

Oh iya, Animasi loading gif “Kotak Kuning” yang mimin pakai bisa di ganti sesuai keinginan mantemans!!

Mantemans bisa buat sendiri sesuka hati menggunakan situs loading.io atau situs-situs ajax loading berformat gif lainnya..

Cara Menerapkan di Website?

Cukup mudah, silahkan ikuti langkah-langkah Cara Membuat Efek Loading saat Pengunjung berpindah Halaman berikut ini :

  1. Simpan kode CSS dibawah ini tepat sebelum tag </head> pada kode HTML web temen2.
    <style>
    #loading-halaman {
    position: fixed;
    z-index: +1000;
    display: none;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:#ffffff url(https://sitamvan.com/wp-content/themes/jd/img/loading.gif) no-repeat center;
    }
    </style>

    Catatan:
    Ganti kode #ffffff pada kode css di atas dengan kode Warna (Hex) dan Url animasi loading https://sitamvan.com/wp-content/themes/jd/img/loading.gif sesuai dengan keinginan / tema blog mantemans. 😀
  2. Selanjutnya, cari tag </body> lalu simpan kode jQuery dibawah ini tepat di atas-nya!
    <script type="text/javascript">
    $(document.body).append('<div id="loading-halaman"></div>');
    $(window).on("beforeunload", function() {
    $('#loading-halaman').fadeIn(500).delay(1000).fadeOut(1000);
    });
    </script>

    Catatan:

    Kode jQuery akan berfungsi jika anda menginstall jQuery Library, Jika anda belum menginstall kode jQuery Library, silahkan copy-paste kode dibawah ini tepat sebelum tag </head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  3. Terakhir Simpan Template!

Sekian postingan tentang [ Desain Web ] Basic Pembuatan Efek Loading Page dengan jQuery, Jika ada pertanyaan jangan sungkan untuk Berkomentar dibawah postingan ini.

Terima kasih & Semoga bermanfaat. 😅😂

Request Tutorial? atau Pertanyaan diluar Topik? silahkan mampir Disini.
# # # # # #

Kasih komen!