Saturday, 23 September 2017

How to Add Preloader Spinner to BlogSpot Blogs

Have you seen a website that displays an animated object before page rendering? Yes, you may have seen this type of site that shows a Preloader before showing its contents. In my previous post, I showed you how to Add jQuery Tabs set and Accordion to BlogSpot. But today, we will learn how to install a preloader to your Blogger theme. This gadget is developed with CSS and a piece of jQuery code. You need to install those snippets to your theme by following the steps mentioned here.


How Preloader Spinner Work?

When you visit a preloader enabled web page, an animated object appears for a few moments, and during this time, the site contents remain invisible. When preloader completes its loading process to the marked time, it fades away, and the contents of the site become visible.

Check out: How to Load Google Fonts Faster In Blogger Template

This spinner loader can be shown anywhere on your Blogger blogs. You can choose the only homepage, only post pages, only static pages and only on a particular page/post. However, I would recommend to display it only on the homepage. By applying this effect to your entire blog, you need to reconsider the concept of good user experience.

Recommended: 13 Penalized SEO Exercise You Need to Think About

Adding Preloader Screen to Blogger

Before you make any change in your Blogger theme, make sure you backup your template in case if you make any mistake with your edits, you can just revert your blog layout to its previous state by restoring it from your hard drive.

  1. Login to your BlogSpot Dashboard > Theme > Edit HTML
  2. Click inside the theme editor > Press Ctrl + F
  3. A search box will appear and type <head> > Press Enter key
  4. Paste the following code right below it
  5. <link href='//' rel='stylesheet'/> <script>$(document).ready(function() {  setTimeout(function(){   $(&#39;body&#39;).addClass(&#39;loaded&#39;);   $(&#39;h1&#39;).css(&#39;color&#39;,&#39;#222222&#39;);  },  3000 ); });</script>
  6. Now search for the </head> and add the given code right below it
  7. <body class='demo'> <div id='demo-content'> <div id='loader-wrapper'> <div id='loader'/> <div class='loader-section section-left'/> <div class='loader-section section-right'/> </div> </div> </body>

    Decide Where to Show The Preloader

    To show or hide the widgets, gadgets or any other plugin on your Blogger blogs, you need to apply the conditional tags as per your requirement.

    To Show Preloader only on Homepage
    <b:if cond='data:blog.url == data:blog.homepageUrl'> Code-Goes-Here </b:if>
    To Hide Preloader only on Posts:
    <b:if cond='data:blog.pageType == "item"'> Code-Goes-Here</b:if>
    To Show Preloader only on Static Pages
    <b:if cond='data:blog.pageType == "static_page"'> Code-Goes-Here </b:if>
    To Show Preloader on Specific Pages:
    <b:if cond='data:blog.url == "URL of the page"'> Code-Goes-Here</b:if>
    To Hide Preloader on a Specific Pages:
    <b:if cond='data:blog.url != "URL of the page"'> Code-Goes-Here </b:if>
    To Show Preloader only on Static Pages:
    <b:if cond='data:blog.pageType == "static_page"'> Code-Goes-Here </b:if>
    To Hide Preloader only on Static Pages:
    <b:if cond='data:blog.pageType != "static_page"'> Code-Goes-Here </b:if>

    After applying the conditional tags, replace the red text with the preloader code that you found on step number 5

  8. Finally, click Save Theme.

Now your Preloader is ready to work. Enjoy

Discover How to Grow Your Blog to 2k+ Visits /Day

Get Free Access

More From Knigulper

Comment Policy

Please Keep in mind that all comments are moderated manually & by default, all the links in comment area are set to nofollow. Using hyperlinks in comment is forbidden and such comments will not be published. Let's enjoy a spam-free conversation.


  1. brother i add it but it keeps on loading without displaying blog

  2. i add it but it keeps on loading without displaying blog