Add an Awesome Preloader In Blogger Website

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.

{tocify} $title={Table of Contents}

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:

how to add preloader in html page,preloader,how to add preloader in website,add preloader to website,blogger,preloader css,how to place a preload image in blogger,website preloader,post loader in blogger template,preloader in html,add preloader in blogger,preloader animation,preloader on website,preloader for website,preloader in blogger website,logo animation in blogger,add preloader effect in blogger,add loading animation in blogger,how to create loading animation in blogger

 
 
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>{codeBox}

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;}{codeBox}

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>{codeBox}
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 (0)
Previous Post Next Post