Adding Preloader for Blogger - Cat Tail Preloader

Hello guys how are you. So I believe you are fine and doing good. Did you noticed something when you clicked on this article.

Yeah that right you have a catchy eyes. If you didn't understand this. Please reload this Page 2 or 3 times so that you can understand.

I hope now you understand so today we are going to install Preloader for blogger blog and this preloader is of cat tail.

Demo

So let's start the tutorial Adding Preloader for Blogger that is Cat Tail Preloader. There is only one steps you have to add

Before starting please backup your blog theme for any kind of errror and easy restoration.

Adding Preloader Effect for Blogger

You can add this with two methods so below I will give the two methods as Method 1 or Method 2.

Method 1

Adding code to Theme

1. Go to Blogger dashboard.
2. Then go to theme section.
3. Click on edit HTML.
4. Now search for the code </body> tag.
5. Copy the below given code just above the </body> tag.

Now click on save theme.

Follow the below Method 2 if you don't want to add in the theme section. Then add as Layout in your blog.

Method 2

Adding code to Layout

1. Login to your Blogger dashboard.
2. Then go to Layout section.
3. Then click on Add a Gadget.
4. After popup click on HTML/JavaScript.
5. Then leave the Title section blank.
6. Copy the below code and paste it on the Content section.

Code

<style>
  .cat{position:fixed;width:100%;max-width:20em;overflow:hidden;background-color:#e6dcdc}.cat::before{content:"";display:block;padding-bottom:100%}.cat:hover > *{-webkit-animation-play-state:paused;animation-play-state:paused}.cat:active > *{-webkit-animation-play-state:running;animation-play-state:running}.cat__body,.cat__tail,.cat__head{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-animation:rotating 2.79s cubic-bezier(0.65,0.54,0.12,0.93) infinite;animation:rotating 2.79s cubic-bezier(0.65,0.54,0.12,0.93) infinite}.cat__body::before,.cat__tail::before,.cat__head::before{content:"";position:absolute;width:50%;height:50%;background-size:200%;background-repeat:no-repeat;background-image:url("https://imgur.com/X17ir1t.png")}.cat__head::before{top:0;right:0;background-position:100% 0%;transform-origin:0% 100%;transform:rotate(90deg)}.cat__tail{-webkit-animation-delay:0.2s;animation-delay:0.2s}.cat__tail::before{left:0;bottom:0;background-position:0% 100%;transform-origin:100% 0%;transform:rotate(-30deg)}.cat__body{-webkit-animation-delay:0.1s;animation-delay:0.1s}.cat__body:nth-of-type(2){-webkit-animation-delay:0.2s;animation-delay:0.2s}.cat__body::before{right:0;bottom:0;background-position:100% 100%;transform-origin:0% 0%}@-webkit-keyframes rotating{from{transform:rotate(720deg)}to{transform:none}}@keyframes rotating{from{transform:rotate(720deg)}to{transform:none}}.box{display:flex;flex:1;flex-direction:column;justify-content:flex-start;justify-content:center;align-items:center;position:fixed;background-color:#e6dcdc;z-index:1000;top:0;left:0;width:100%;height:100vh}
</style>
<div class='box'>
  <div class='cat'>
    <div class='cat__body'></div>
    <div class='cat__body'></div>
    <div class='cat__tail'></div>
    <div class='cat__head'></div>
  </div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type='text/javascript'>
    $(window).load(function () {
        setTimeout(function () {
            $(".box").fadeOut("slow");
        }, 1000)
    });
</script>

After adding all this stpes I hope you have successfully Added preloader for your blog. If you got any problem then please contact us.

Conclusion

So today we have discussed about Adding Preloader Effect on Blogger Cat Tail Preloader. I hope you like this article if you got any questions please comment and below and do like the post. Do visit us again for this kind of Tips and tricks.

Reference:
https://www.phamvanlinh.xyz