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 exactly 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 CSS by UPG.com.np */
#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 

/* Preloader Javascript */
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(window).load(function(){$("#status").fadeOut("slow");$("#preloader").delay(500).fadeOut("slow").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.