In this article Im going to give you preloading effect codes for Blogger. So let's check.
Which type of codes are used?
This preloading effect codes have HTMl, JS and CSS.
How it works?
The Preloading animation will show till the page completely load then it will show the website main content is also responsive.
How to add a Preloading in Blogger?
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
/* Preloading by (T_Mk) */ .pldW{direction:ltr;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background:var(--bodyB);align-items:center;justify-content:center;z-index:9999;visibility:visible;opacity:1;transition:all .8s ease} .pldW.e{display:flex} .pldW.h{opacity:0;visibility:hidden} .pldS {position:relative;transform:rotate(165deg)} .pldS:before, .pldS:after{content:'';position:absolute;display:block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-50%,-50%)} .pldS:before{animation:pldBefore 2s infinite} .pldS:after{animation:pldAfter 2s infinite} @keyframes pldBefore{0%{width:.5em;box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}35%{width:2.5em;box-shadow:0 -.5em rgba(225,20,98,.75),0 .5em rgba(111,202,220,.75)}70%{width:.5em;box-shadow:-1em -.5em rgba(225,20,98,.75),1em .5em rgba(111,202,220,.75)}100%{box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}} @keyframes pldAfter{0%{height:.5em;box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}35%{height:2.5em;box-shadow:.5em 0 rgba(61,184,143,.75),-.5em 0 rgba(233,169,32,.75)}70%{height:.5em;box-shadow:.5em -1em rgba(61,184,143,.75),-.5em 1em rgba(233,169,32,.75)}100%{box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}} .drK .pldW{background:var(--darkB)}Step 6: Now search the code <!--[ Related post ]--> or <b:includable id='post-related'> and paste the following Codes just below to it.
<!--[ Preloader ]-->
<b:includable id='preloader'>
<div class='pldW' id='preloader'>
<div class='pldS'/></div>
<script>/*<![CDATA[*/ var preloader=document.querySelector('#preloader'); preloader.classList.add('e'); document.addEventListener('DOMContentLoaded', function(){setTimeout(function(){preloader.classList.add('h')},2000); neonLight(5000);}); /*]]>*/</script>
</b:includable>if you want only Posts and Pages appears Preloading follow the below codes
Step 7: Now search the code </head> and paste the following Codes just below to it.
<!--[ Preloader ]--> <b:include cond='data:view.isSingleItem and !data:view.isPreview' name='preloader'/>
if you are a Plus ui user not there preloading no need to add this total follow the below codes
Step 8: Find The below codes
<!--[ Preloader ]-->
<b:includable id='preloader'>
<!--[ Disable all the codes to remove preloader ]-->
<!--<div class='pldW' id='preloader'><div class='pldS'/></div><script>/*<![CDATA[*/ var preloader=document.querySelector('#preloader'); preloader.classList.add('e'); document.addEventListener('DOMContentLoaded', function(){setTimeout(function(){preloader.classList.add('h')},2000); neonLight(5000);}); /*]]>*/</script>-->
</b:includable>now replce the Step 6: codes
if you Getting error in codes
Step 5: codes add after this Step 9: codes add
Step 9: Now search the code </body> and paste the following Codes just above to it.
<!--[ Preloader ]-->
<div class='pldW' id='preloader'><div class='pldS'/>
</div><script>/*<![CDATA[*/ var preloader=document.querySelector('#preloader'); preloader.classList.add('e'); document.addEventListener('DOMContentLoaded', function(){setTimeout(function(){preloader.classList.add('h')},2000); neonLight(5000);}); /*]]>*/</script>Step 10: Now click on Save by clicking this icon
Step 11: That's done!
Conclusion
In this article I have made a tutorial onHow to add Preloading in Blogger. I hope you have liked it and Please do share with your friends and follow our blog for more