Sometimes your website or blog takes more time to load which can be a frustration for your readers. By adding this jQuery preloader effect, it can reduce your readers’ frustration. Actually what happens is that when a visitor visits your blog, they will see a beautiful preloader when the page is loading and it is automatically removed when the page is fully loaded.


The preloader is actually a transition that appears when your blog is loading and it is removed after the blog is loaded completely. It engages the readers on your blog and attracts them. An example of a preloader is shown in the image.





How to Add a Preloader in Blogger
So to make preloader visible in your blogger site you need to implement the following procedures:

Step 1. Go to Your Blogger Dashboard >> choose Theme >> click the Edit HTML button as shown in the image below:


 
 
Step 2. After that find <body> in your HTML Code by pressing Ctrl+F and add the HTML Code given below after it.


HTML Code
 <div id='preloader'>   <div id='status'>      <img alt='' src='https://www.blogger.com/img/gear.gif'/>   </div></div>


Step 3. Find ]]></b:skin> in your code and paste the CSS code exactly before it.

CSS Code
 #preloader {    position: fixed;    top: 0;    left: 0;    right: 0;    bottom: 0;    background-color: #ffffff;    z-index: 99999;    height: 100%;}#status {    position: absolute;    left: 50%;    top: 50%;    width: 64px;    height: 64px;    margin: -32px 0 0 -32px;    padding: 0;}

Step 4. Now find </body> in your theme and paste the javascript code exactly before it.

Javascript Code
 <script>/*====================================* Preloader Effect======================================*/ $(window).load(function() {   $(&quot;#status&quot;).fadeOut(&quot;slow&quot;);   $(&quot;#preloader&quot;).delay(500).fadeOut(&quot;slow&quot;).remove();  })</script> 

That's it. Now your blogger site will have a furnished preloader. If you didn't understand any steps then the comment box is yours. I will fully assist you. Thank you.

Post a Comment

Previous Post Next Post