|
| © Copyright 2025 Vaibhav Bhoot |
This is very simple process and all you have to do is to follow the
below given process carefully.
So let's start the Process of Adding Preloader for Blogger as Bird
Loading Style.
Adding Preloader For BLOGGER
Step 1:- Open Your
Blogger dashboard.
Step 2:- Now go to the Layout section.
Step 3:- Now click on Add a Gadget. A popup box will appear.
Step 4:- Now click on HTML/JavaScript.
Step 5:- Now leave the title blank and
Copy the below given code and paste it in the content section.
<style>
.loadd {
position: fixed;
background: #6944ff;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100vh
}
.body {
position: absolute;
top: 50%;
margin-left: -50px;
left: 50%;
animation: speeder .4s linear infinite
}
.body > span {
height: 5px;
width: 35px;
background: #fff;
position: absolute;
top: -19px;
left: 60px;
border-radius: 2px 10px 1px 0
}
.base span {
position: absolute;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 100px solid #fff;
border-bottom: 6px solid transparent
}
.base span:before {
content: "";
height: 22px;
width: 22px;
border-radius: 50%;
background: #fff;
position: absolute;
right: -110px;
top: -16px
}
.base span:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 0 solid transparent;
border-right: 55px solid #fff;
border-bottom: 16px solid transparent;
top: -16px;
right: -98px
}
.face {
position: absolute;
height: 12px;
width: 20px;
background: #fff;
border-radius: 20px 20px 0 0;
transform: rotate(-40deg);
right: -125px;
top: -15px
}
.face:after {
content: "";
height: 12px;
width: 12px;
background: #fff;
right: 4px;
top: 7px;
position: absolute;
transform: rotate(40deg);
transform-origin: 50% 50%;
border-radius: 0 0 0 2px
}
.body > span > span:nth-child(1),
.body > span > span:nth-child(2),
.body > span > span:nth-child(3),
.body > span > span:nth-child(4) {
width: 30px;
height: 1px;
background: #fff;
position: absolute;
animation: fazer1 .2s linear infinite
}
.body > span > span:nth-child(2) {
top: 3px;
animation: fazer2 .4s linear infinite
}
.body > span > span:nth-child(3) {
top: 1px;
animation: fazer3 .4s linear infinite;
animation-delay: -1s
}
.body > span > span:nth-child(4) {
top: 4px;
animation: fazer4 1s linear infinite;
animation-delay: -1s
}
@keyframes fazer1 {
0% {
left: 0
}
100% {
left: -80px;
opacity: 0
}
}
@keyframes fazer2 {
0% {
left: 0
}
100% {
left: -100px;
opacity: 0
}
}
@keyframes fazer3 {
0% {
left: 0
}
100% {
left: -50px;
opacity: 0
}
}
@keyframes fazer4 {
0% {
left: 0
}
100% {
left: -150px;
opacity: 0
}
}
@keyframes speeder {
0% {
transform: translate(2px, 1px) rotate(0deg)
}
10% {
transform: translate(-1px, -3px) rotate(-1deg)
}
20% {
transform: translate(-2px, 0px) rotate(1deg)
}
30% {
transform: translate(1px, 2px) rotate(0deg)
}
40% {
transform: translate(1px, -1px) rotate(1deg)
}
50% {
transform: translate(-1px, 3px) rotate(-1deg)
}
60% {
transform: translate(-1px, 1px) rotate(0deg)
}
70% {
transform: translate(3px, 1px) rotate(-1deg)
}
80% {
transform: translate(-2px, -1px) rotate(1deg)
}
90% {
transform: translate(2px, 1px) rotate(0deg)
}
100% {
transform: translate(1px, -2px) rotate(-1deg)
}
}
.longfazers {
position: absolute;
width: 100%;
height: 100%
}
.longfazers span {
position: absolute;
height: 2px;
width: 20%;
background: #fff
}
.longfazers span:nth-child(1) {
top: 20%;
animation: lf .6s linear infinite;
animation-delay: -5s
}
.longfazers span:nth-child(2) {
top: 40%;
animation: lf2 .8s linear infinite;
animation-delay: -1s
}
.longfazers span:nth-child(3) {
top: 60%;
animation: lf3 .6s linear infinite
}
.longfazers span:nth-child(4) {
top: 80%;
animation: lf4 .5s linear infinite;
animation-delay: -3s
}
@keyframes lf {
0% {
left: 200%
}
100% {
left: -200%;
opacity: 0
}
}
@keyframes lf2 {
0% {
left: 200%
}
100% {
left: -200%;
opacity: 0
}
}
@keyframes lf3 {
0% {
left: 200%
}
100% {
left: -100%;
opacity: 0
}
}
@keyframes lf4 {
0% {
left: 200%
}
100% {
left: -100%;
opacity: 0
}
}
</style>
<div class='loadd'>
<div class='body'>
<span></span>
<span></span>
<span></span>
<span></span>
<div class='base'>
<span></span>
<div class='face'></div>
</div>
</div>
<div class='longfazers'>
<span></span>
<span></span>
<span></span>
<span></span>
</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 () {
$(".loadd").fadeOut("slow");
}, 500)
});
</script>
Step 6:- Now click on Save.
That's all. Now I hope you have successfully installed Flying Bird style
Preloader on your blogger blog.
The benefits of adding this preloader from layout section is that you can
enable disable this preloader easily. And if you don't want it you can
also remove it easily.
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.
Rate This Article
Thanks for reading: Preloader for Blogger Bird Style, Sorry, my English is bad:)