If your loading speed seems disturbing, I mean slow, then you're throwing your visitors away. If you cant do anything about the weight of your site than atleast you can do something to lessen the irritation caused by waiting. Page Preloader makes waiting more comfortable as if you're personally telling them to wait a second I'm on it!
1. The first thing you're going to do is to download the loader.gif located at the demo page including the instruction to downloading it.
2. Once that gif file has been downloaded, go to Design > Edit HTML/CSS > Add new file > then upload the loader.gif.
3. Now on the same screen, go to main-style.css located at the upper left. Copy the code below and paste it at the bottom most of the main-style.css. Save after.
#preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fefefe;
z-index: 99;
height: 100%;
}
#status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(loader.GIF);
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
}
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fefefe;
z-index: 99;
height: 100%;
}
#status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(loader.GIF);
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
}
4. Go to Pages Tab and select the page you want to insert this effects. Once selected, insert the code to the page <head>. You can do this by clicking the selected page and on the right pane click the advance settings. You will see the box for the header code, its where you insert the code below.
<script type="text/javascript">
// makes sure the whole site is loaded
jQuery(window).load(function() {
// will first fade out the loading animation
jQuery("#status").fadeOut();
// will fade out the whole DIV that covers the website.
jQuery("#preloader").delay(1000).fadeOut("fast");
})
</script>
// makes sure the whole site is loaded
jQuery(window).load(function() {
// will first fade out the loading animation
jQuery("#status").fadeOut();
// will fade out the whole DIV that covers the website.
jQuery("#preloader").delay(1000).fadeOut("fast");
})
</script>
5. Save and edit that page. Drag one embed code and paste the following on the TOP MOST of the page:
<div id="preloader">
<div id="status"> </div>
</div>
<div id="status"> </div>
</div>
6. If you're planning to add this preloader to another page just repeat the step 4 and 5. Credits to the script maker located at the demo page. Thank You and hope you like it.
Thanks, Working 100%
ReplyDelete