How to Add Lazy Page Loading Effects To Website/Blog Latest

• 

  Add caption

  Go To Blogger.com >> Your Blog >> Template >> Edit HTML >> Proceed.
• Now within the template Search For ]]></b:skin> and just above it Paste the following CSS coding.

1. 
   
2. /*  MBL Lazy Page Loading Effect (www.blogshelper.blogspot.com) */
3. #mbl-lazyloading {
4.     position: fixed;
5.     z-index: 50;
6.     top: 0; left: 0;
7.     width: 100%; height: 100%;
8.     background: #FDFEF8 url(Loading-GIF-Here) no-repeat center;
9.     line-height: 350px;
10.     text-align: center;
11.     font-size: 36px;
12.     color: #353231;
13.     text-indent: -9999px;
14. }
15. .MD #mbl-lazyloading { display: none; }
16. 
    
17. @media only screen and (device-width: 768px) {
18.     #loading {
19.         position:absolute;
20.         width:1040px;
21.         min-height:768px;
22.     }
23. }
24. #mbl-progress-bar {
25.     position: absolute;
26.     top: 0; left: 0;
27.     background: #de1301;
28.     opacity: 0.8;
29.     width: 0;
30.     height: 18px;
31. }
32. #mbl-loader {
33.     height: 100%;
34.     display: none;
35. }

• Now again within your template Search for </head> and just above it paste the following JavaScript Coding.

1. 
   
2. <script>
3. 
   
4. (function($){
5. 
   
6. $("html").removeClass("MD"); 
7. 
   
8. 
   
9. $("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) });
10. $("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) });
11. 
    
12. 
    
13. $(window).load(function(){
14. 
    
15.     $("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
16.         $("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
17.     });
18. 
    
19. });
20. })(jQuery);
21. </script>

Once again in your template Search for </body> and above it paste the following HTML code.

• Paste this coding if you want to show This Loading effect only on your home page. (Recommended)

1. 
   
2. <b:if cond='data:blog.url == data:blog.homepageUrl'> 
3. <div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://www.mybloggerlab.com">MyBloggerLab</a></div></div></b:if>

• Paste the following coding if you want to see this loading effect on each and every page of your blog.

1. <div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://www.mybloggerlab.com">MyBloggerLab</a></div></div>

TIP: You have to choose whether you want to show the loading effect only on your homepage or on each and every page that is on your blog. According to us, you should keep this loading effect on your homepage because repeated loading effect might annoy visitors.

• Now from the above CSS coding Replace Loading-GIF-Here with any of the following Animated loading effect that you like the most.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZih_EoRw30svklaJpTV1nkN3ojbxCldCVRXq8HrBwf6Zy9StXlpqjhE4U-tNrmD0VsCTuTmhtb208l09YL919iP07CI2OWj_9A-zckX1wBaHm4MiJOvGwrLj0w35Jg-0bOrpp0FeWMZ8/s1600/MBL-Loading-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzVm1Lnc0pT88l9yk9fy-eZUOhdbmawN_LhrJi1cS8t6P5L3tQKvQ7laivubtGRbPSOWu-tfJQk-ADAo5eRzPKQJq0QtgWNNbzG-Jre_o39uPEwRsAYxi3mWPFU7V_Dr2ePcAN2pWC-Q/s1600/MBL-Loading-2.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1rKfU6YkKLipAm-lc3FgizrD-vcmL5iJrJeDhCsVQX9MFXu801PKl6Zw3GVfLYu5_O6qtXOVHvkkjr0WqSZFWvQqzMCUgt8CI978kR4pOF5GWqEZ9O_RMRBw6rloMJUYk5v2NX95jbE/s1600/MBL-Loading-3.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijZxpQ6DP11H9XxmpPDQ96nlYb4p3kTB7z2ot-QmJsZQ2i7DqpweKFP7MrqGdkCS0of8y2B3bUPnKuCfr5dOB9Y0gCioset0m7PDsFpFk5YWOcXUgvgfjaYMWocQYv7jIS8ejvmyD0WLo/s1600/MBL-loading-4.gif

Add caption

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFWz2k5W5G992fhEa1WVnGx07_Gu9LINUMYTnqK_V8oCJGX7P_NemQWATKghfXq0M3sicBYWcLzFTDpVIOdHz7PCUi7YPc3uvdQjqCAO14mxxzcCatboh2VCuR3n6ftapTb2muCpxvJ3g/s1600/MBL-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqMg5Te_k5tpT9_PCxbPJP_jV-2_7iMzti_nXKXwBtuhHv4R4OzYh685DztAg4EPg-JXNJB9_2h-LUjp7A4RSPVrM9yhOXEwUUxb1zKgAtP2n8p6vosFTLss08VzO2m8RyJ0rZcf9k_eU/s1600/MBL-loading-6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiP_kfulumM5HxRY0_XOdH1K_CauvYSmz46o-CrUBOX7_GYLDN1ioTt4XBAMTdwXfvrp2fPROiSCwYIZrbIuqb1dc7b4GEpKJb0ZcztchqTkLGWIp1DpJw9Kjehxmi-HAf7iIcGsRgRg/s1600/MBL-loading-7.gif