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

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

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.



Seogic TutorialWebForBloggerUpdated at : 1:07 PM

Available Posts to Read

Image
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...
Image
Navigation is very important for website appearance. By navigation, visitors of website could know e...
Image
Social bookmark sites are very important for site development. There already many webmaster using bookmarking sites to get backlink juice in...
Image
There are six google buzz button styles below : Normal Count : 5 Small Count : 1 Normal ...
Image
Google +1 button or google plus one button is very useful button to be added on your blog. you can ...
Image
How to add facebook share button with counter on your blog ? 1. Login to blogger with your ID 2...
Image
I've found this list from my friend. This is a list of dofollow comment with high google pagerank . It's huge enough list, do co...
Image
Below are basic HTML code tutorials . Create Hyperlink : <a href="http://yoursitename.co...