Friday, July 12, 2013

Cara membuat efek loading menggunakan ajax


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/AVvXsEiYdm6FCtFNDENAAdySH5mswbmGWnmfyxpdxeTxn8SwN4TAYo83_HZ65z41HB4UUx2y0LJbI46HaW0UOMFEuQOOpw4KHkHVKesW4OhSUfxOD8GvwwYKzOrQW-Ldr2UZDAWT0OeDkFSqT8w/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/AVvXsEg7hpjL4ZUUYPOh9Ho725P-HQPuBh9bzOzOgrCgcrll8QacpNSUUz_T3KbuX2xP-jxUzN4a8s2OE4JHtCSis_4XCWFbmFDjR7O450Zu8CuWCbrIsbq533Oq0uGAHeAk7DCUbIGqS-z-ue8/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


at

No comments:

Post a Comment