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.
- Login to your BlogSpot Dashboard > Theme > Edit HTML
- Click inside the theme editor > Press Ctrl + F
- A search box will appear and type <head> > Press Enter key
- Paste the following code right below it
- Now search for the </head> and add the given code right below it
- Finally, click Save Theme.
<link href='//cdn.rawgit.com/knigulper/github.io/gh-pages/www.knigulper.com/Preloader2.css' rel='stylesheet'/> <script>$(document).ready(function() { setTimeout(function(){ $('body').addClass('loaded'); $('h1').css('color','#222222'); }, 3000 ); });</script>
<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
Now your Preloader is ready to work. Enjoy
Loader is working but it doesn't lift off. Kept showing on home screen.
BalasHapus