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
4 komentar
Maaf , saya mau tanya nih
BalasHapusGimana 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
Lihat sudah pasang jquery di templatenya blom
HapusMas pindahkan file scriptnya ke googledrive sebelum ikut terhapus nanti malah error.
BalasHapusSaya juga sedang memindahkan beberapa script.
Okee gan, klo sudah punya wktu online
HapusLink 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>