Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
AJAX is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. AJAX was made popular in 2005 by Google, with Google Suggest.
Google Suggest is using AJAX to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions. Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs
You can also use AJAX to create some beautiful loading effects on your blogger blog. Here we go:
- Go To Blogger > Template > Edit HTML > Click on "Proceed"
- Find and place following code below <body>:
<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>
- Now add following code just above </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/AVvXsEh1-DMF_2ELaLMFFOFWGw5wA7hTFnRimVjuZ1NftTS5Ik3tem5nDd-GMA7v1sFxfpSMyptt6qhbEoWPtIM90BTsXn4gKHFxNxVj6nKy9WpFoK9H9on6L_Xa3y7tnuyAxoe4X7ZsiJr0Pvw/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/AVvXsEijoHdj8b4N4HYsdgZ5Xf8t7Cj51p8kBgOcplIV8Xse3bt2InhJi5Sidjhw-upO4DAfIce7QHeFAq-lWDBRfrBMxvpZYtj3crPvFXKQuU4hK5_gelnF1SAqe0667mph2Irnif15ensDcJE/s1600/BWidgets.png) no-repeat center 25%;
height: 100%;
display: block;
}
</style>
Save your template and see the magic....Don't forget to leave a comment....
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
