Add An Attractive Loading Page Effect Using jQuery
If it takes a moment for your blog to load, you don’t want your visitors to end up staring at a blank page because they might think that their browser froze or that your site is 404’ed. When that happens, you run the risk of losing traffic.
So, why not assure them that your site’s going to load up any moment by showing them a loading indicator? Not just any loading indicator but an attractive loading indicator. Check out the DEMO.
Follow the steps below:
- Log in to your Blogger dashboard, go to Design, and under “Template”, click on “Edit HTML”.
- Put a check on the “Expand Widget Templates” box by clicking on it.
- Using “Ctrl+F”, look for the </head> tag
- Copy/paste the following code before it:
<style> /* bloggertrix.com */ #md-loading { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #FDFEF8 url(http://4.bp.blogspot.com/-57JMakfEz8M/UC8kRA431BI/AAAAAAAAC9Y/VI_wkXKi0Pw/s1600/Bloggertrix-loading.gif) no-repeat center; line-height: 350px; text-align: center; font-size: 36px; color: #353231; text-indent: -9999px; } .MD #md-loading { display: none; } @media only screen and (device-width: 768px) { #loading { position:absolute; width:1040px; min-height:768px; } } #md-progress-bar { position: absolute; top: 0; left: 0; background: #0d5ff6; opacity: 0.8; width: 0; height: 18px; } #md-loader { height: 100%; display: none; } </style> <script> (function($){ $("html").removeClass("MD"); $("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) }); $("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) }); $(window).load(function(){ $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){ $("#md-loading").fadeOut("fast",function(){ $(this).remove(); }); }); }); })(jQuery); </script>
- Using “Ctrl+F” again, look for <body>
- Copy/paste either of the two codes below right after it:
1. Use this code to show the loading effect on ALL BLOG PAGES
<div id='md-loading'> <div id='md-progress-bar'></div> <div id='md-loader'>Loading...</div></div>
2. Use this code to show the loading effect on just the HOMEPAGE ONLY
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='md-loading'> <div id='md-progress-bar'></div> <div id='md-loader'>Loading...</div> </div> </b:if>
- Save your template and you’re done! View your blog.
The loading animation effect should now appear once you open up your page. Enjoy!
0
511
