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/AVvXsEg3b71LdavaMIDi095JWQ5-BBMWjcvFjG7WuNxOCBn9ACWj6X0OjvT1e4OTeJ7U8NdIxt9kg0Fqhyphenhyphen17Cv3gBpjtgDqyZDO1qxJBoSxeNUNiPfRvV4szDHlDTLwhOXV0u7ZGdkcFeGNpFvo/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/AVvXsEjkyZYpzV4nPJXM2KygFHNbHBMnbfuDB0bfBwE5Rvt1O4sSbbGEpzCf1nq_SbtukrKVRwSPjDcnE0GFl1AItqUlOmnFBHUjo9uDebv99hGAjgB7NQqmffFTzaArweVvHHMzW05Lg1aQXps/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
