Preloader for Blogger Bird
So let's start the Process of Adding Preloader for Blogger as Bird Loading Style.
Let's Do a Demo Here...!
Adding Preloader For Blogger
Step 1:- Go to 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.
Conclusion
This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .
Copyright ©
.png)