Add Preloader in Blogger

Add Preloader in Blogger
Add Preloader in Blogger

You might have seen some loading effect while opening websites/blog i.e. preloader or loading animation in GIF format. Preloader enhance the look of website and it entertain us in no/weak internet connection. In this blog post we will learn about how to add preloader animation in Blogger.

 

◘ What is Preloader ?

  Preloaders are often animations. It can be simple or complex which are used to keep visitors entertained while working of server operations in finishing processing. It keeps the visitor on the screen while the rest of the page’s content is still loading.
◘ How to add Preloader in Blogger ?
 
 • Open Blogger Dashboard
 • Go to theme section
 • Edit HTML
 • Add Below CSS code in your CSS section of theme

CSS

/* Preloader CSS */ #page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url(http://fc04.deviantart.net/fs70/f/2013/094/8/d/loading_logofinal_by_zegerdon-d60eb1v.gif’) no-repeat 50% 50%;padding:1em 1.2em;display:none}
http://fc04.deviantart.net/fs70/f/2013/094/8/d/loading_logofinal_by_zegerdon-d60eb1v.gif’  ~ this is the link of preloader that is going to use in. Change it with your preloader link.
 • Add below JS just above the  </body> tag
<script type="text/javascript">
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

 • Now save your theme and check the

How Preloader looks like !

◘ What a preloader contains ?

Preloader is generally made for entertain the visitor, but you can use it for showing the intro of your website/blogs. Like make a gif which contain the overview of your platform in short i.e.  3-4 sec.

Thanks for being here, stay connect with us.

Leave a Comment