Certified Business Analysis Professional (CBAP)

Add NFS Page Loading Animation Effect On Every page For Blogger

Add NFS Page Loading Animation Effect On Every page For Blogger



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/AVvXsEjf_gwmD2NfiNfhafDAveTpdTIxVNHOim2__CFPGjdKVXpo0IBoxxA4fQoGya0GFAtEO4oei3cA3vaeRaUOxvlWYP8l3eHWN1QJOdTZvHYugpNIWk5CPZiPeu1b2Cy7PW0ylV34Cbz1mrSh/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($){ $(&quot;html&quot;).removeClass(&quot;MD&quot;); $(&quot;#header&quot;).ready(function(){ $(&quot;#md-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) }); $(&quot;#footer&quot;).ready(function(){ $(&quot;#md-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) }); $(window).load(function(){ $(&quot;#md-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){ $(&quot;#md-loading&quot;).fadeOut(&quot;fast&quot;,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
 

NOTE:-If u Like This Post Please Give Comments For Your Feedback Suggestion Or Help Thanks..!!
Previous
Next Post »

1 comments:

Click here for comments
Unknown
admin
16 October 2014 at 02:55 ×

Very Nice .I like this

Congrats bro Unknown you got PERTAMAX...! hehehehe...
Reply
avatar

Contact Form

Name

Email *

Message *