Add NFS Page Loading Animation Effect On Every page For Blogger
.png)
Hello friends Today i am going to Show you how you can add a good looking Page-Loading Animation Effect on your Blog Because every bloggers want to look that their blog look like Smart and more attractive than Other Bloggers.This is the new Page-Loading effect,When Visitors Are click on any link of your blog then A animated loading screen will show and this effect is automatically fade out when requesting page is loaded.This is the best and simple way to impress our visitors.This animation is simple to apply on your Blog.!
Follow Below Steps-and make your Blog super..
Step:-1 Go to Your Blogger Dashboard
Step:-2 Then Go to Template (Note-Please Make Backup Of your template Before Do this..!!)
Step:-3 Click on Edit HTML Button
Step:-4 Now find the Below Code Using Click Ctrl + F form your keyboard
Step:-5 Now paste Below code after <Body>
Like Below Image
.png)
Step:-6 Now Find Below Code
.png)
SCREEN SHOTS
Hello friends Today i am going to Show you how you can add a good looking Page-Loading Animation Effect on your Blog Because every bloggers want to look that their blog look like Smart and more attractive than Other Bloggers.This is the new Page-Loading effect,When Visitors Are click on any link of your blog then A animated loading screen will show and this effect is automatically fade out when requesting page is loaded.This is the best and simple way to impress our visitors.This animation is simple to apply on your Blog.!Follow Below Steps-and make your Blog super..
Step:-1 Go to Your Blogger Dashboard
Step:-2 Then Go to Template (Note-Please Make Backup Of your template Before Do this..!!)
Step:-3 Click on Edit HTML Button
Step:-4 Now find the Below Code Using Click Ctrl + F form your keyboard
<Body>
Step:-5 Now paste Below code after <Body>
<div id='md-loading'><div id='md-progress-bar'/><div id='md-loader'>Loading...</div></div>
Like Below Image
Step:-6 Now Find Below Code
</Head>
Step:-7 Now past Below Code Before </Head>
<style> /* jQuery page loading effect by www.99pcsoft.blogspot.com */ #md-loading { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXviyXmfYTJZnO1__AKRS9pusX3Y0-TDnx3YT_jRIz5y98XqfOJ5YHfZg2nli47MCvCmTi5U6B60hM4ne-20tM-UKz8__tTqCtZzHBXw9SxM-WI7bypUNTvbdAYJrSmwHK22ijtO7ykHbA/s1600/need_for_speed_the_run_boot_animation_by_bruellkaefer-d4jt104.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: #de1301; opacity: 0.8; width: 0; height: 3px; } #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>
Like Below Image
Step:-8 Now Hit Save Template button and Enjoy
:-U can change gif image with your own image Red Line
:-U can Change loading Bar Height Blue Line
:-U can change gif image with your own image Red Line
:-U can Change loading Bar Height Blue Line
NOTE:-If u Like This Post Please Give Comments For Your Feedback Suggestion Or Help Thanks..!!
Sign up here with your email
Yorumlarınız için teşkür ederim Conversion Conversion Emoticon Emoticon