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
brother i add it but it keeps on loading without displaying blog
ReplyDeleteMay i have your blog URL?
Deletei add it but it keeps on loading without displaying blog
ReplyDelete@VheeQ! Can i have your blog URL?
Deletebro i add it but it keeps on loading without displaying blog
ReplyDeleteHe loading on my blog
ReplyDeleteMy blog only loading content not shown
ReplyDeleteDear Bloggers! if you are having a problem with this Preloader like Loader is keep loading and doesn't go off and your website is not appearing, then follow my steps.
ReplyDeleteThe above codes are fine. There is only a problem that admin of the post didn't told exactly where to place there codes.
So, Let's get started.
REMEMBER: Remove the %.
Step 1: Place this Code BELOW <%head>
<%link href='//cdn.rawgit.com/knigulper/github.io/gh-pages/www.knigulper.com/Preloader2.css' rel='stylesheet'/>
Step 2: Place this code BELOW <%/head>
<%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>
Step 3: Place this code ABOVE <%/body>
<%script>$(document).ready(function() { setTimeout(function(){ $('body').addClass('loaded'); $('h1').css('color','#222222'); }, 3000 ); });<%/script>
That's it.
If your is now solved, Please pass a smile and do remember me in your prayers :-) and i request to the admin, if you read my Comment, Please update the post.
Thanks so much just what i wanted.
ReplyDeleteIf you need a sport betting prediction tips and also sport news.
CLick here now - https://www.9jacentral.com.ng
iulo9ip
ReplyDeletegood
ReplyDeletehttps://www.megaflash.online
ReplyDeleteVery nice...I am very happy to see this post because it is very useful for me because there is so much information in it. I always like to read quality and I'm happy that I got this thing in your post. Thanks for sharing the best article post. Click this comment
ReplyDelete