Today the main question is that we are going to solve is “How To Add An Awesome And Stylish Website Or Blog Loading Page That Will Appear Until Your Website Or Blog Will Be Full Loaded.” The solution is available now to make your visitor mind easy and give him a rest to be easy by giving him a bright hope by viewing him the loading text. So users as i myself visit many sites in a day and we have to wait to be loaded but we have to see half loaded site and we did not wait to get full, we start scrolling from which we missed many of the features of that site like some sites have J-Query plugin that will take a long time to be loaded but we can wait and get dispressed Instead of these restless option we have to give rest to our visitor by adding the loading page so until our sites will be load, the visitor have time to get a back on the chair to be rested.
From this code you will get your bouncing rate also high that is good for SEO. This is a simple JavaScript code of few line so it will also take care of your blog time and did not make your blog boring but also give an awesome view to the incomers. So without any further preface directly proceed to the code but first you have to see the DEMO that is just a click away from your finger.
Table of Contents
Features:
1.) It Will Show A Full Filled Colour Page With Loading Text Untill Your Page Will Be Loaded Fully.
2.) It Will Automatically Disappear After Your Page Loaded Fully.
3.) It Will Give A Relax Mind To Visitor To Be Relax Untill The Page Will Be Loaded Fully.
4.) Full CSS Page With Quick Loading.
5.) Short JavaScript.
6.) Awesome And Stylish Design.
7.) Fully Customizable.
8.) Easy To Use The Source Code.
9.) You Can Add Anything On The Loading Page.
10.) Lot Of Features Also Available.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template”.
4.) Click “Edit HTML” .
5.) Now Scroll To “<body>” Tag.
6.) Now Copy The Below Code And Replace It With <body> Tag.
<body onLoad='init()' >
7.) Then Copy The Below Code And Paste It Just After <body> Tag.
<!-- This Is A CopyRight Code Of EXEIdeas International.It Is Free To Use But With HTML Design Code. If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<div id='exelodingdiv' style='z-index:999999999;position:fixed; width:100%; height:100%; top:0px; left:0px; background-color: #efefef;'>
<div style='position:absolute; text-align:right; right:5%; bottom:0%; font-size: 55px;font-family:Arial, Helvetica, sans-serif; font-weight:bold;text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);'>
<h1>Loading...</h1>
</div>
</div>
<script type='text/javascript'>
var ld=(document.all);
var ns4=document.layers;
var ns6 = document.getElementById;
if(document.all){
ns6 = false;
}
var ie4=document.all;
if (ns4) ld=document.exelodingdiv;
else if (ns6) ld=document.getElementById("exelodingdiv").style;
else if (ie4) ld=document.all.exelodingdiv.style;
function init() {
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
<!-- This Is A CopyRight Code Of EXEIdeas International.It Is Free To Use But With HTML Design Code. If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
8.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Scroll To “<body>” Tag.
3.) Now Copy The Below Code And Replace It With <body> Tag.
<body onLoad='init()' >
4.) Then Copy The Below Code And Paste It Just After <body> Tag.
<!-- This Is A CopyRight Code Of EXEIdeas International.It Is Free To Use But With HTML Design Code. If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<div id='exelodingdiv' style='z-index:999999999;position:fixed; width:100%; height:100%; top:0px; left:0px; background-color: #efefef;'>
<div style='position:absolute; text-align:right; right:5%; bottom:0%; font-size: 55px;font-family:Arial, Helvetica, sans-serif; font-weight:bold;text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);'>
<h1>Loading...</h1>
</div>
</div>
<script type='text/javascript'>
var ld=(document.all);
var ns4=document.layers;
var ns6 = document.getElementById;
if(document.all){
ns6 = false;
}
var ie4=document.all;
if (ns4) ld=document.exelodingdiv;
else if (ns6) ld=document.getElementById("exelodingdiv").style;
else if (ie4) ld=document.all.exelodingdiv.style;
function init() {
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
<!-- This Is A CopyRight Code Of EXEIdeas International.It Is Free To Use But With HTML Design Code. If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
5.) Click Save, Now You Are Done.
Customization:
1.) You Don’t Have To Customize It.
2.) Feel Free To Ask If You Experienced Any Problem.
3.) If You Want To Customized More Like Text, Page Colour, Add Extra Thing, Position. Feel Free To Ask.
gud work
Thanks Dude…
Awesome dost!
Thanks Bro…
Find The Below Code In Your Blog…
< body expr:class='”loading” + data:blog.mobileClass’>
And Change It With…
< body expr:class='”loading” + data:blog.mobileClass’ onLoad=’init()’>
And Do Rest Of Step As I DID…
awesome hassan and i am succesfully edit your code to mix with image loading process.
thanks alot visit my blog HERE
Nice Editing, You Are Welcome…
thanks
I hope you want to link exchange with My Blog
I Am Not Exchanging Links Yet…
Nice Loading Demo .Like it very much .
Also see my recent post :http://www.devilspot.in/2012/12/the-best-creative-idea-blog-post-by.html
Thanks For Visiting And Liking Our Code…
Sir, The Loading Page appears but even when the loading is completed, then also the loading page would not disappear………….What can be the reason.??
I tried it on 2 blogs, On 1 it is working but on 2 its not working.
1. http://filesblog123.blogspot.com -Working
2. http://faadulinks.blogspot.com -Not Working
You Are Not Using Our Code On Second Blog, Please Add It First…
Okay i will add it again, i removed it because the 2nd blog acts as a link portal for my official blog..and if any script on 2nd blog will not work then it will become a big problem……
Whatever i will add it again………… but for a short period of time.
Ok, Waiting….
I got the problem,, it was not working becozz i was using adf.ly converter script on my blog.. and now when i removed it, your script is working…………THANKYYYYYYYYYYYUUUUUUUUUU
http://www.faadulinks.blogspot.com
Sorry to disturb you.. 😛
Thanks, Two JavaScript On A Page Will Cancel Out Each Others So Avoid Conflicting…
I think you are so awesome. Can you tell me how to improve my conversion rate?
You Are Welcome, Have A Look On Dave Article Here.