How to Add Preloader with Your Own Logo 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='your_logo'/>
</div>- Replace the marked link with your logo link.
If the code does not work or you’ve faced any error/problem then please download the source code files from the given download button.
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.
© Copyright - ASThemesWorld