How to Add Preloader in Blogger

How to Add Preloader in Blogger


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.

What is Preloader

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.

How to Add a Preloader in Blogger

So to add preloader in your blogger site you need to implement the following codes:

Adding JavaScript Codes

Find the </body> tag in your template and paste the following JavaScript Codes just above it.

<script type='text/javascript'>
/*<![CDATA[*/
// Preloader

$(window).bind("load", function () {
jQuery("#stringPreloader").fadeOut();
jQuery("#loader").fadeOut();
});
/*]]>*/
</script>

Adding CSS Codes

Find ]]></b:skin> in your template and paste the CSS code above it.

/* PRELOADER */
#loader {
position: fixed;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
height: 100%;
width: 100%;
z-index: 99999;
}
#stringPreloader {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

#stringPreloader {
-webkit-animation: spinner 2.5s infinite linear;
animation: spinner 2.5s infinite linear
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}

Adding HTML Codes

Now search for the code </head> and paste the following codes just after it.

<div id='loader'>
<img id='stringPreloader' src='https://1.bp.blogspot.com/-9FoZYOAxxiM/Xtpgp_VwTbI/AAAAAAAAIqk/iPWQg-WebkcU5CyDM0QKBvofU5YhPOPqACK4BGAsYHg/virus.png'/>
</div>
 
 

Replace the marked link with your logo link.


That's it. Now Preloader is successfully added on your Blogger Website. If something isn't clear or have any question, let us know in the comments.


Article "How to Add Preloader in Blogger" protected

Post a Comment

Previous Post Next Post