Add Animated Page Loading Effect for Blogger

Page loading with animated effects is pretty cool for blogger user, it makes your blog more responsive and attractive in front of upcomin...

Animated page loading effect for blogger
Page loading with animated effects is pretty cool for blogger user, it makes your blog more responsive and attractive in front of upcoming visitors. Today there are lots of tools and inventories from which you can make everything like previously, I have discussed with you that how to add or create Custom Scrollbar with Hover Effects, List view to Grid View and Magazine Style this web designing series is very helpful for you if you want to customize your blog template, just like today I will share with you new stylish page loading effect for blogger blog. Let's start this interesting tutorial by seeing the demo below.
Open your blog account.

Click on Template>> Edit HTML>> Press CTRL+F.

Please make sure that you already have this script below, if you don’t have so add it above </head>.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
Search the below code.
</body>
Now add the below code just above </body> and Click on Save Template.
<style>
#nbl-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('http://4.bp.blogspot.com/-XP5j_EnrvXw/VZvhkAX0yII/AAAAAAAAIfE/zehYUOnZ7o0/s1600/loader.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
opacity: 0.5;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="nbl-page-loader">Loading...</div>'); $(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()` $('#nbl-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
You can also change the animated image by changing the above URL which is present in RED color with your image URL but remember in this script you have to use flash moving image, don’t add any simple JPG or PNG image, use GIF extension images.

I hope this small tutorial will help you to make your blog more awesome, this animated page loading effect is totally professional if you know and see the templates from most popular theme site Theme Forest so you would know that they also used this script for adding massive loading effect in blogger template.

COMMENTS

Name

Android,2,backlinks,7,Blogger,45,Errors,1,How To,31,Make Money Online,2,SEO,13,SMM,10,Templates,8,Tools,7,Tricks,15,Web designing,17,Widgets,24,WordPress,4,
ltr
item
PRO TECHNIFY: Add Animated Page Loading Effect for Blogger
Add Animated Page Loading Effect for Blogger
http://4.bp.blogspot.com/-Wqh3XU5dFDk/VZ01elAW4CI/AAAAAAAAIfY/7mgJs2Sz7f8/s640/Animated-Page-Loading-Effect-for-Blogger.png
http://4.bp.blogspot.com/-Wqh3XU5dFDk/VZ01elAW4CI/AAAAAAAAIfY/7mgJs2Sz7f8/s72-c/Animated-Page-Loading-Effect-for-Blogger.png
PRO TECHNIFY
http://www.protechnify.com/2015/07/animated-page-loading-effect-for-blogger.html
http://www.protechnify.com/
http://www.protechnify.com/
http://www.protechnify.com/2015/07/animated-page-loading-effect-for-blogger.html
true
8223102945718438291
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy