How To Add Preloader in Blogger ?

How To Add Preloader in Blogger / Blogspot Theme?

Hello Friends, in This Post I will say How To Add Preloader in Blogger. I am going to share or this article will also help you to make any Professional One Text animation as a loading screen effect. If your blog seens to have time in load, then you must definitely install Preloader in your blog. This feature makes your website or blog experience loading experience. Let's get started.

Step 1 :- Adding Css

For Adding this Css login to your blogger account > Theme > Edit Html > Then Search For ]]></b:skin> and paste the css code just above of this code.

/* This Preloader Design By Www.SmartTechMukesh.Online */

.preloader {
  overflow:hidden;
  background:#fff;
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:fixed;
  z-index:9999;
}

.smarttechmukesh-logo {
  position:absolute;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
  ;
}

 .preloader .smarttechmukesh-logo1 img {
padding:0 10px;
  border-radius:4px;
  letter-spacing:normal;
  top:-0px;
  margin-right:3px;
  }
 
.preloader .smarttechmukesh-logo1 h1::first-letter,
 .preloader .smarttechmukesh-logo1 h2::first-letter {
  background:#3b5998;
  
color:#fff;
  padding:0 10px;
  border-radius:4px;
  letter-spacing:normal;
  top:-0px;
  margin-right:3px;
}

.preloader .smarttechmukesh-logo1 h1,img {
  font-size:30px;
  ;
}

Step 2 :- Adding HTML

For adding This html go to theme > Edit HTML > Search For <body> Or Find Code similar like this <body...> and add the html code just below of <body> tag.

Style 1 With Large Text Loading

<div class="preloader">
    <div class="smarttechmukesh-logo1">
        <div class="smarttechmukesh-logo"><h1>M</h1></div>
    </div>
</div>

Style 2 With Small Text Loading

<div class="preloader">
    <div class="smarttechmukesh-logo1">
        <div class="smarttechmukesh-logo"><h1>M</h1></div>
    </div>
</div>

Style 3 With Image Pre Loading

<div class="preloader">
    <div class="smarttechmukesh-logo1">
        <div class="smarttechmukesh-logo"><img src="https://1.bp.blogspot.com/-Wi0AsG-bPl8/YMDb-Gll6WI/AAAAAAAAA_k/nbMZD0U4TE0K2wxvv4vfcja7EL2m9UggQCPcBGAYYCw/s48/smarttechmukesh.png"/>   </div>
    </div>
</div>

https://1.bp.blogspot.com/-Wi0AsG-bPl8/YMDb-Gll6WI/AAAAAAAAA_k/nbMZD0U4TE0K2wxvv4vfcja7EL2m9UggQCPcBGAYYCw/s48/smarttechmukesh.png

Change Your Image Url.  s48 Means Image Height.

Step 3 :- Adding JavaScript

For Adding This JavaScript Go to theme> Edit Html > Then Search For </head> and paste the JavaScript just above/before the </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(".smarttechmukesh-logo1").fadeOut("slow");
                setTimeout(function () {
                    $(".preloader").fadeOut("slow")
                }, 500)
            }, 500)
        });
    </script>

Conclusion :-

In this post I have shared with you all How To Add Preloader in Blogger. So how did you like this post and tell me by commenting. If you have any question then you can comment. Thanks for visiting our website.

Refrence:
Www.SmartTechMukesh.Online

Read Also :