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 smarttechcarry */
.preloader {
overflow:hidden;
background:#fff;
left:0;
right:0;
top:0;
bottom:0;
position:fixed;
z-index:9999;
}
.smarttechcarry-logo {
position:absolute;
top:calc(50% - 20px);
left:calc(50% - 20px);
;
}
.preloader .smarttechcarry-logo1 img {
padding:0 10px;
border-radius:4px;
letter-spacing:normal;
top:-0px;
margin-right:3px;
}
.preloader .smarttechcarry-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 .smarttechcarry-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="smarttechcarry-logo1">
<div class="smarttechcarry-logo"><h1>M</h1></div>
</div>
</div>
Style 2 With Small Text Loading
<div class="preloader">
<div class="smarttechcarry-logo1">
<div class="smarttechcarry-logo"><h1>M</h1></div>
</div>
</div>
Style 3 With Image Pre Loading
<div class="preloader">
<div class="smarttechcarry-logo1">
<div class="smarttechcarry-logo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImMCJ3fuB69iBMlQrFxUZy5Le58hoHbImnFpSEGzviTeBev4AxSwj06XQX9MgripglpWtHSJpmuke8uzw9EUIAZvy6gdgec9kSxig4VLGfoOEJ02kAP-orSjMAi_j88KMoQ-fLr7kFdY/s48/smarttechmukesh.png"/> </div>
</div>
</div>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImMCJ3fuB69iBMlQrFxUZy5Le58hoHbImnFpSEGzviTeBev4AxSwj06XQX9MgripglpWtHSJpmuke8uzw9EUIAZvy6gdgec9kSxig4VLGfoOEJ02kAP-orSjMAi_j88KMoQ-fLr7kFdY/s48/smarttechmukesh.pngChange 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 () {
$(".smarttechcarry-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 :
Smart Tech Carry
Rate This Article
Thanks for reading: How To Add Preloader in Blogger ? :)
Conclusion
In this article, I have shared How To Add Preloader in Blogger ? . I hope you have liked it Please do share it with your friends and follow our blog for more.
Join our Telegram Channel to get the lastest posts updates daily. Thank you!