how to add ajax page loading effect to blogger
how about giving a shocking effect to your visitors.Here’s a example to make your web page content display a ajax page loading effect to blogger.You can see the effect in action on my pages and here is one. another blogger example
how to add ajax page loading effect to blogger
Step1
Add the latest jquery library to your head section by going to edit html in designer of blogger.
Step2
Add the following code just below the <body> tag
how to add ajax page loading effect to blogger
Step1
Add the latest jquery library to your head section by going to edit html in designer of blogger.
Step2
Add the following code just below the <body> tag
<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>
Step3
Then go to your template designer and then to add css section add the following code
#loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #3c5a76 url(http://dl.dropbox.com/u/13256471/fuzionpro/109.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: #7fb061;
opacity: 0.8;
width: 0;
height: 18px;
}
#loader {
background: url(http://dl.dropbox.com/u/13256471/fuzionpro/fuzionpro.png) no-repeat center 25%;
height: 100%;
display: block;
}
Note:
.v2 property is the class attribute in html tag this is key of the effect
Step4
Then the magic using jquery add this script to the head section
<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>
how to dispayed it only on homepage?
ReplyDeletehi fuzionpro.. i try this plugin on another blog
ReplyDeletehttp://6tech.blogspot.com/
it no working :( i really need this plugin.. hmm i hope you will replay soon
to display this only in homepage add the code below for the step 2
ReplyDelete<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>
</b:if>
sorry for the late reply.....
ReplyDeleteit should work properly....try this things
1.change the background url images loaction to yours in step 3
2.make sure you have these id properties header and footer
3.did you add the jquery library
hi rajesh... oh im sorry. i do not know how to add jquery library :??
ReplyDeleteHow ya?
You just add some code.
Deleteget the code here
woahh! it working. thank rajesh.
ReplyDeletehi ! Rajesh, how to make more slower? emm.. set the time etc etc?
ReplyDeleteyou can play around with the numbers in the .animate function (step4)
ReplyDeletehello.. it is not working for blogspot..
ReplyDeletecan you explain this step by step?
mine is a blogspot and its working fine
ReplyDeleteI mean..
ReplyDeletewhen I put the script as instructed above,the blog only keep loading and loading..
It does not show the content of the blog..
How can I resolve this?
ok try this put the script in step 4 in a js file and call it in the head section like this
ReplyDelete<script src='http://dl.dropbox.com/u/13256471/js.js' type='text/javascript'></script>
Sorry.. but it also not working..
ReplyDeleteI have put the script above /HEAD
and it is not working..
love this :)
ReplyDeleteIn my page there is no head tag.. what can i do?
ReplyDeleteits no way that your site couldn't have a head tag plz check it again
ReplyDeletewhen I put the script as instructed above,the blog only keep loading and loading..
ReplyDeleteIt does not show the content of the blog..
ME TOO!
i works fine for my site .....if its not working means you couldn't have seen this page
ReplyDeletethank you very much
ReplyDeletemy blog is http://adepters.blogspot.com/
Hi, I really like your "loading effect" and I would like to put it in my blog but, I can´t make it work.
ReplyDeleteWould you be so kind to explain it like it is for a 6 years old who doesn´t know any html.
I know a little bit, but I don´t know what "jquery" is (it appears in my template) or what add css section is.
add the code in step 3 just above the following code (edit html in blogger dashboard)
ReplyDelete]]>
</b:template-skin>
Hi, thanks for your answer. But, I keep trying and trying and it doesn´t work out for me.
ReplyDeleteWould it be posible that some part of the code is wrong?
I have tried in other blog and it didn´t work out either
Thank you anyway!!!
Did you add library? Insert this code right below head tag
Deletesorry for my mistake i just missed a open braces in the code in step4...........i updated it......now it works great..........
ReplyDeleteCan u help me pls?
ReplyDeleteThis is my mail jokes_fm@yahoo.com ...it's not working
Thanks Bro!
ReplyDeleteCHECKOUT http://www.anandvip.com
worked like a breeze
how to do it in my blog http://movietrees.blogspot.com/
ReplyDeletetry this one Also and here you can find more help regarding your question
ReplyDeleteEasy loading bar & logo effects with jQuery
http://workwithphp.info/?p=38
It's Great effect Rajesh!
ReplyDeleteI use it with my web now without any problem.
I just want to understand how this code is working, especially the css code:
.v2 #loading { display: none; }
what is the benefit of the .v2 ?
and the jQuery:
$("html").removeClass("v2");
Thanks Rajesh you helped me a lot with this post.
please tell me wat is .v2 property
ReplyDeleteOk guys here's where you all are doing it wrong.
ReplyDeleteAdd the script after the jQuery library cause without the library file loaded the script is useless.
Amazing man....i was looking for this for my new android app...thx man
ReplyDeleteReally no matter if someone doesn’t be aware of afterward its up to other viewers that they will assist, so here it takes place.
ReplyDeletewebsite design