If you didn't understand this. Please reload this Page 2 or 3 times so that you can understand.
 |
| © Copyright 2024 Tecky AaryaN |
I hope now you understand so today we are going to install Preloader for blogger blog and this preloader is of cat tail.
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 or Method 1 .
Method 2
Method 1
Step 1: Go to Blogger dashboard.
Step 2:Then go to theme section.
Step 3:Click on edit HTML.
Step 4:Now search for the code </body> tag.
Step 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
Step 2:Then go to Layout section.
Step 3:Then click on Add a Gadget.
Step 4:After popup click on HTML/JavaScript.
Step 5:Then leave the Title section blank.
Step 6:Copy the below code and paste it on the Content section.
<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>
To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.
Copyright
