How To Add Preloader in Blogger / Blogspot Theme?

How To Add Preloader in Blogger / Blogspot Theme?

How To Add Preloader in Blogger / Blogspot Theme? - 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 SmartTechMukesh.Online */
.preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.smarttechmukesh-logo{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);}
.preloader .smarttechmukesh-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 .smarttechmukesh-logo1 h1{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.
<div class='preloader'>
<div class='smarttechmukesh-logo1'>
<div class='smarttechmukesh-logo'><h1>M</h1>
</div>
</div>
</div>

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='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(".smarttechmukesh-logo1").fadeOut("slow");
                setTimeout(function () {
                    $(".preloader").fadeOut("slow")
                }, 500)
            }, 500)
        });
    </script>

Conclusion:-

Hello friends In this post I have shared how to create a custom preloader and add it to your blogger website or blogger theme. If you still find any difficulty, then please tell me in the comment. Thank you for reading this post.

Try Search Engine Optimization


Preloader Using Html Css And Js, How To Add Preloader, How To Add Preloader In Blogger, How to create Custom Preloader, How To Add Preloader In Blogger Template, How To Add Preloader In Blogspot Theme, How To Create Preloader Using Html Css And Js, Add Preloader In Blogger Template, How to make a loading animation in Blogger Template, loading effect for Blogger, Preloader, Add Preloader in Blogger, Preloader for Blogger,How to make custom loading screen in Blogger, smarttechmukesh, SmartTechMukesh, Smart Tech Mukesh : Blog