Creating Effects Loading When Opening Page Blog

div class='post-body entry-content'>

The next tutorial is to create the effect of loading when the load / create a blog page. This effect is pretty cool, because while waiting for everything load blog page, then this effect will appear. So that visitors do not become bored. Yes it is ..

For those not aware of this effect, please click on one or link on this blog, then it would appear eek.

How do I create these effects?

A. Go to the mode Template> Edit HTML. Find the code]]> </ b: skin>

2. Put the following code right above the code]]> </ b: skin>

/* EFFECT LOADING */
#page-loader{
position:fixed;
top:0;
left:0;
background-color:#000;
z-index:9999;
text-align:center;
width:100%;
height:100%;
padding-top:200px;
font-size:25px;
color:#fff;
display:none;
}

You can change this CSS code, so it looks more interesting

3. Then find the code </ body>

4. Put the code below just above the code </ body>

<div id='page-loader'>
<span style='font-size:70px;font-weight:bold;'>Loading...</span><br/>
Please wait!<br/>Blog is Loading</div>

For words can be replaced, as needed.

5. Search again </ head>

6. Enter the code below, just above the </ head>

<script type='text/javascript'>
$(function() {
var siteURL = &quot;http://&quot; + top.location.host.toString();
var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;], a[href^=&#39;#&#39;]&quot;);
$internalLinks.click(function() {
$(&#39;#page-loader&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
});

// Remove the overlay when clicked to address the problems, especially if the internal link is set to target=&#39;_blank&#39;
$(&#39;#page-loader&#39;).click(function() {
$(this).hide();
});
});
</script>

IMPORTANT!
If you have not installed the JQuery blog, first plug the well. Do I put the following code above the </ head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

ENOUGH JUST ONE FILE jquery

Common mistakes that often occur are installing more than one JQuery. Make sure there is only one JQuery alone! Installing more than one JQuery file will cause the script not running ...!

Source : http://hompimpaalaihumgambreng.blogspot.com
Translate by : www.e-nanra.blogspot.com
Visit my another blog : www.e-nanra.blogspot.com , www.gohealthful.blogspot.com , www.visitandvacationindonesia.blogspot.com