TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

When visitors comes to our website, they always wait page load before they could fully read our post. For that, we could create the page loa... nopict

How to Create Interesting Fade In Fade Out Animations on Page Load with Jquery For Blogger

When visitors comes to our website, they always wait page load before they could fully read our post. For that, we could create the page load proccess looks interesting. There already many tutorials about page load animations. However this page load animations is cool in my opinion.

There are two options here:

1. The page load animation with red color Visit This Page

2. The page load animation with blue color Visit This Page

You may choose which one that you most prefer.

If you already choose just follow the tutorials given below:

For The Red Animation Page Load

1. Login to blogger with your ID

2. Go to Template

3. Click Backup/ Restore

4. Click Edit HTML

5. Find this code: </head>

6. Paste below code just above </head> code:

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

7. Find this code </body>

8. Paste below code just above </body> code:

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<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;]&quot;);
$internalLinks.click(function() {
$(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
});
$(&#39;#loadhalaman&#39;).click(function() {
$(this).hide();
});
});
</script>

9. Find this code: ]]></b:skin>

10. Paste below code just above ]]></b:skin> code:

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

11. Click Save Template


For The Blue Animation Page Load

1. Login to blogger with your ID

2. Go to Template

3. Click Backup/ Restore

4. Click Edit HTML

5. Find this code: </head>

6. Paste below code just above </head> code:

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

7. Find this code </body>

8. Paste below code just above </body> code:

<div id='loadhalaman'>
<div class='ball'/>
<div class='ball1'/>
</div>
<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;]&quot;);
$internalLinks.click(function() {
$(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
});
$(&#39;#loadhalaman&#39;).click(function() {
$(this).hide();
});
});
</script>

9. Find this code: ]]></b:skin>

10. Paste below code just above ]]></b:skin> code:

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.ball {background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 35px #2187e7; width:50px; height:50px; margin:0 auto; -moz-animation:spin .5s infinite linear; -webkit-animation:spin .5s infinite linear;}
.ball1 {background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 15px #2187e7; width:30px; height:30px; margin:0 auto; position:relative; top:-50px; -moz-animation:spinoff .5s infinite linear; -webkit-animation:spinoff .5s infinite linear;}
@-moz-keyframes spin {0% { -moz-transform:rotate(0deg); }100% { -moz-transform:rotate(360deg); }}
@-moz-keyframes spinoff {0% { -moz-transform:rotate(0deg); }100% {-moz-transform:rotate(-360deg);}}
@-webkit-keyframes spin {0% { -webkit-transform:rotate(0deg); }100% { -webkit-transform:rotate(360deg); }}
@-webkit-keyframes spinoff {0% { -webkit-transform:rotate(0deg); }100% { -webkit-transform:rotate(-360deg); }}

11. Click Save Template.



There are no comments yet for 'How to Create Interesting Fade In Fade Out Animations on Page Load with Jquery For Blogger'