Cara membuat efek loading menggunakan ajax

Cara membuat efek loading menggunakan ajax

Javascript jQuery

AJAX bukanlah bahasa pemrograman baru, tapi cara baru bagaimana menggunakan standar yang ada. AJAX adalah seni bertukar data dengan server, dan memperbarui bagian-bagian dari suatu halaman web - tanpa reload seluruh halaman. AJAX dibuat pada tahun 2005 oleh Google, dengan Google Suggest.

Google Suggest menggunakan AJAX untuk membuat antarmuka web yang dinamis: Ketika Anda mulai mengetik di kotak pencarian Google, sebuah JavaScript mengirimkan surat ke server dan server mengembalikan sebuah daftar saran. Contoh aplikasi yang menggunakan AJAX: Google Maps, Gmail, Youtube, dan tab Facebook

Anda juga dapat menggunakan AJAX untuk menciptakan beberapa efek load di blog blogger Anda. Berikut ini adalah caranya:

Login ke akun Blogger > Template > Edit HTML

Cari dan letakkan kode berikut di bawah tag kode <body>:

<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>

Sekarang tambahkan kode berikut tepat di atas tag </ head>:

<script charset='utf-8' src='http://widcraft.googlecode.com/svn/jquery.min.js' type='text/javascript'></script>
<script>
(function($){
$("html").removeClass("v2");
$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#loading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>
<style>
#loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
 background: #3c5a76 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdgDgK2gICbe3jxwXcuvEGK88uV6glhD2eto8S4BizVe10dzqd0JzPOVr1UlOnUpP3hXrIUzMtFKJpvU7D7wmez8KfO1zDSNgTIG3MZzOLyB-e6_ZjiQntZd1L-RvasphPQyU-XxLf9h8/s1600/Loading.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.v2 #loading { display: none; }
#progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: rgb(236, 133, 0);
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#loader {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbYNFvjyaFOpYtEOADdKmhY4BE-IOaYSgGvx_VfbMlbPW-2ocVDNZiH781LrD2hkKj7KEys739YjkAc1K-EjK0EUD3mm20ckCBWGXdIlzgBjAeCZ1J6ShgHd2RPIwMVVvLTdtX8CR-J8c/s1600/BWidgets.png) no-repeat center 25%;
 height: 100%;
 display: block;
}
</style>

oke, klik simpan perubahan dan lihat hasilnya...

Semoga berguna, jika ada pertanyaan silahkan salurkan di form komentar sob


Artikel Terkait

  • Smooth scrolling pada komentar
    Sebenarnya efek smooth scrolling ini untuk menandai sebuah elemen di dalam komentar itu sendiri pada hash target komentar dengan jQuery dan beberapa tambahan css yaitu css target. lihat gambar dibawah ini: Untuk memasangnya pada komentar blog anda, silahkan ikuti langkah dibawah ini 1. Login ke akun blogger Anda. 2. Pilih Template » Ed…
  • Membuat persentase ketika scroll digulung
    Mungkin trik ini terbilang tidak penting untuk mendukung apa pun di dalam blog, namun untuk anda para sobat yang suka dengan kreasi dan menambah unik tampilan, persentase scroll bisa dipasang sebagai hiasan. Dengan menambahkan persentase scroll, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll/ia gulung, jika penggulung…
  • Membuat Widget Numpage Navigasi untuk Komentar
    Komentar dengan Navigasi Widget Blogger adalah Widget untuk Komentar Anda. By Default Blogger Komentar ini memiliki navigasi halaman link (Terlama, Lama, Baru dan Terbaru) di bagian atas dan bawah bagian Komentar. Sementara pada pada Blogger yang Upgrade ke Threaded Comment, link pagination ini telah menghilang. Namun, Jika Anda ingin mengguna…
  • Memasang efek animasi loading halaman blogger
    Sudah lihat animasi loading blog ini, itu adalah hasil dari efek animasi loading beforeunload. Kali ini kita membuat efek animasi yang ditampilkan bukan karena terpicu oleh momen klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang efek animasi loading ketika perpindahan halaman dengan cara in…
  • Daftar Isi Blog Tampilan Dinamis dengan jQuery
    Jika sebelumnya kita membahas daftar isi otomatis jquery navigasi maka sekarang kita coba membuat 'Daftar Isi Blog' dengan tampilan dinamis accroding dapat menggunakan jQuery seperti gambar di atas. Caranya gampang sobat Blogger, ikuti petunjuk berikut: 1. Login ke akun blogger anda 2. Pilih Entri Baru/Buat laman baru atau bisa menambahkan di…
  • Mengompress data Javascript tools YUI Compressor
    Mungkin blog tanpa javascript akan terasa biasa saja dan menjadi kurang menarik, itu semua menurut saya. karena dengan javascript kita dapat menciptakan hal - hal cantik dengan efek yang terlihat unik untuk sebuah tampilannya. dengan semakin majunya javascript berbagai hal yang terbilang berhubungan dengan blog kini banyak tercipta, bila anda …

4 komentar

  1. Sakok3 Januari 2014 pukul 06.07

    Maaf , saya mau tanya nih
    Gimana cara menggunakan jQuery ajax di template seperti http://themes.creativemilk.net/files/elite/index.html
    Saya sudah coba mengikuti tutorial diatas , tetapi tidak bisa
    Mohon bantuannya
    Makasih

    BalasHapus
  2. Muhammad Adam Hussein, S.Pd12 Januari 2014 pukul 07.02

    Mas pindahkan file scriptnya ke googledrive sebelum ikut terhapus nanti malah error.

    Saya juga sedang memindahkan beberapa script.

    BalasHapus

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...