How To Add JQuery Lazy Load Plugin To Your Blogger Blog

This post will explain to you how to add JQuery Lazy Load Plugin to your blogger blog or any other website easily. This script is used to show a loader, when peoples open your web page.( For Example, you are thinking to play a PC game so before you could start playing you have to go through loading part.) This script is 100% working. If you want to insert Please  follow me.

 

 

 

 

 

Features of  Lazy Page Loader:

• It is search engine friendly so it will not affect your Site Speed or anything.
• It is compatible with almost each and every browser i.e. Chrome, Firefox, Internet Explorer and etc.
• It has multiple Loading effects so you can choose according to your desire needs.
• It has flexible coding so you can customize it without any hesitation whatsoever.

• It will also help those blogs which take less time to load because the loading features will keep your visitors interested in your blog.

 

How To Install Lazy Page Loading Effect To Blogger:

 

• Log in Your Blogger

 

• Click “ Template” button.

 

• Hit “Edit HTML”.

 

• Proceed.

 

• Find  ]]></b:skin> and just above it Paste the following CSS coding (CTRL + F ).

 

/* Entertainment Lazy Page Loading Effect (www.entertainer001.blogspot.com) */ #mbl-lazyloading { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #FDFEF8 url(Loading-GIF-Here) no-repeat center; line-height: 350px; text-align: center; font-size: 36px; color: #353231; text-indent: -9999px; } .MD #mbl-lazyloading { display: none; } @media only screen and (device-width: 768px) { #loading { position:absolute; width:1040px; min-height:768px; } } #mbl-progress-bar { position: absolute; top: 0; left: 0; background: #de1301; opacity: 0.8; width: 0; height: 18px; } #mbl-loader { height: 100%; display: none; }

 

 Now from the above CSS coding Replace Loading-GIF-Here with any Animated Loading Effect ( Some effects are given below. Select one.)

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

 

<span id="preserveebc98db4e8dc419087fcc68f4a4792d5" class="wlWriterPreserve"><script> (function($){ $("html").removeClass("MD"); $("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) }); $("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) }); $(window).load(function(){ $("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){ $("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); }); }); }); })(jQuery); </script></span>

 

 

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

 

(Recommended)

 

• If you want loading effect on each and every page of your blog, Copy below code and paste it above </body> tag.

 

 <div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'> Powered By <a href="http://www.entertainer001.blogspot.com">Entertainment</a></div></div>

 

 

• If you want to show This Loading effect only on your home page,Copy below code and paste it above </body> tag.

 

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'> Powered By<a href="http://www.entertainer001.blogspot.com">Entertainment</a></div></div></b:if>

 

 

 

Select Animated Loading Effect :

 

 

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-7je5OPCDFLFE_yqvPXE89TwaaZBI1tC55CILARrcvO8mo5z6NUbSZTAPFR4v29KI0bojD67WUEocC4lSi5bbIROXI-FZ0YlMa8lJPjf4bXT91hAGOazcywf_9ESGwLRn7KS6Y9WdzU/s1600/MBL-Loading-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoS0AXy6Lg3MBttk0gBa2BWhchIuSxgmChsN2LR-xEryStaSobKFN5PjsHTmJI6NMFraPSJLFwt9AdGgVj4fsRlizgQrSFRKL_fWYbFQN4tPzWnVs97KIYQxzv2wUwT-AbYHnW_rsE70/s1600/MBL-Loading-3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqZqCPB_OUVIxSeTHr4faegzGevNxt4VRLwnORIIgYvygAQ3Rudr0Y3Bm8Z5mgdtiUq9Poi_FrzyoUEk5SJou98z17vkrRAPgcxtvZ7pfJLu-3vJMSQ-yMDP9HJNKCKjO0-6yZtPytBY/s1600/MBL-Loading-2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPY6jCy0BDIJwfxdGsNEDZUjXDdeuHbghrAeBA4empXm10Z3jYj9Iw06rVvBuj8lay-uRFZ8N-EWLYRY8OOMQ5N56o2tuHqUOgvwejkPudFj_M4C1lHFcYs2fjN1Q26wgac_mt2pourQ/s1600/MBL-loading-6.gif

 

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

 

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

 

 

 

 

 

 

 

………………………………………END……………………………………………..

Posted in: Blogs and Websites, HTML, Tricks + Hacks