How to add a preloader with logo on blogger

Hi welcome to Sayem Tutorial. In today tutorial i will show you how you can add a preloader with logo on blogger.
DEMO
Fast go to blogger.com then click on Theme and then click on Edit HTML.

Fast click on Theme then click on Edit HTML

Now Press Ctrl+F then search for </body> tag then add this code before </body> tag.

 <script type='text/javascript'>
 /*<![CDATA[*/
// Preloader
 
$(window).bind("load", function () {
    jQuery("#stringPreloader").fadeOut();
    jQuery("#loader").fadeOut();
});
  /*]]>*/
</script>

Now search for ]]></b:skin> tag then add this code before this ]]></b:skin> tag

/* PRELOADER */
#loader {
position: fixed;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
height: 100%;
width: 100%;
z-index: 99999;
}
#stringPreloader {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

#stringPreloader {
    -webkit-animation: spinner 2.5s infinite linear;
    animation: spinner 2.5s infinite linear
}
@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes spinner {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

Now the last step , now add this code after </head>

<div id='loader'>
<img id='stringPreloader' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdpLWlfwdnIKF3EwqHRXPhPsf6yH4VAJSLMrySsosdUYdNOpLzt8vJKzsJqfaNBvoJq1OMSMcp9KaBoWdEa_mV_BxuSmG0ah_Pzt_RRFHN7b132ka93245OLdwH0LOm_fZYh1DhjD7l935/'/>
</div>

Note: Change the  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdpLWlfwdnIKF3EwqHRXPhPsf6yH4VAJSLMrySsosdUYdNOpLzt8vJKzsJqfaNBvoJq1OMSMcp9KaBoWdEa_mV_BxuSmG0ah_Pzt_RRFHN7b132ka93245OLdwH0LOm_fZYh1DhjD7l935/ image url with your  logo url.