Wednesday, 16 October 2013

Animated Page Loading Effect For Blogger

Add Stylish Page Loading Effect In Blogger
Hello Everyone, That's Mine First Post In This Blog And I Am Going To Post One Of The Most Attractive Widget. Not Only This Time But I Will Continue To Post About Tech And Blogging. Every Blogger Wants His Blog Looks Best Than Others Blog. But How? My Friends, I Have A Awesome Widget For Blogger Which Will Let Your Blog Look More Attractive. It Is Just A Different Widget, Lie The Exit Effect In Microsoft Power Point Custom Animation. After Adding This Widget In Your Blog, When Any Of The Visitor Click Any Link Of Your Blog, In Spite Of Old Boring Loading Effect, They Will Experience A Animated Page Loading!

To See The Demo, Go To My Other Site : http://www.thesoftplanet.com And Click Any Of The Link.
                                
Demo Of Page Loading
Demo Of Page Loading Effect

Adding Widget To Blogger

To Add This Widget Do The Following :
  • Go To Template > Edit HTML > Now Find </body>. And Paste The Following Code Just Above </body>.
<style>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWLrKFlT247kSiMYA9h0J8pSS7idzo2DGBJJSfB0tR5iYCDOSghCVxFAbrxhxcfedHcX-U-seAXoUcGBx1KQsIiFnurLc9ZHUefK4_6flUYQHWye8ntYzFLwWIwC0jYG7q2QPIrTwpPDA/s200/load6.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
  • After Adding The Code, Save Your Template.
Note : If You Want To Change The Loading Image, Change The Image URL With The URL In Red.

Now You Are Done, Now You And Your Visitors Can See Awesome Stylish Animated Page Loading Effect In Your Blog.

No comments:

Post a Comment