LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Widgets / Website / Website Widgets » Awesome And Stylish Website And Blog Loading Page

Awesome And Stylish Website And Blog Loading Page

Awesome And Stylish Website And Blog Loading Page

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.

Recommended For You:
How To Add "HTML Link To This Post" Widget In Blogspot?

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.

Recommended For You:
Stylish CSSed EXE-Fixed Footer Bar With Show/Hide Button

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.

Recommended For You:
Simple And Stylish "Related Posts" Text Widget For Blogspot

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.

You Like It, Please Share This Recipe With Your Friends Using...

20 Responses to “Awesome And Stylish Website And Blog Loading Page”

  1. ARAVIND BALAJI says:

    gud work

  2. EXEIdeas says:

    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…

  3. Radi Rachim says:

    awesome hassan and i am succesfully edit your code to mix with image loading process.
    thanks alot visit my blog HERE

  4. Ajay Surya says:

    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

  5. Lucky Singh says:

    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.??

  6. Lucky Singh says:

    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.

  7. Lucky Singh says:

    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.. 😛

  8. Philecia Whiting says:

    I think you are so awesome. Can you tell me how to improve my conversion rate?

Leave a Reply to ARAVIND BALAJI Cancel reply

Your email address will not be published. Required fields are marked *