TGSBD: How to Add Simple Page Pre-Loader in Blogger

It's not really uncommon for a webpage to load a bit longer than expected especially these days wherein often the not we build websites that are a bit media intensive, graphics, slideshows, JavaScript files, CSS files and many more. Of course there is and will always be a better way to load these pages such as minimizing the number of images on a page or simply optimizing photos. But sometimes some bloggers, just like me, can't compromise the visually looking of my website just to make it a bit faster.

Also, have you ever try visiting a website wherein the page does not really look like a webpage at all due to some technicalities? Good thing we can display a pre-loader. This pre-loader thing will basically display a loading image before the whole page loads. I tried looking for a percentage pre-loader but its really complicated to cover anyway this simple page pre-loader will suffice, thanks to Brad Knutson of his self-entitled website bradknutson.comfor this tutorial.

July 25, 2016 - Code Updated

Step #1. Proceed to Dashboard > Template > Edit HTML

Step #2. Add this code below <body

<div class="loader"></div>

Step #3. Add this jQuery code above </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>

Step #4. Add this CSS code above ]]</b:skin>

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://lh5.googleusercontent.com/-aukb7CmzW-I/U5SnqO-8mmI/AAAAAAAAUsY/8mcq77sA7sE/w334-h216-no/loading-tgo.gif') 50% 50% no-repeat rgb(249,249,249);
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://lh5.googleusercontent.com/-aukb7CmzW-I/U5SnqO-8mmI/AAAAAAAAUsY/8mcq77sA7sE/w334-h216-no/loading-tgo.gif') 50% 50% no-repeat rgb(249,249,249);
}

Step #5. Replace the URL in Yellow of your preferred loading image.