How to add Preloading in Blogger

3 min read

Hello, Bloggers! Welcome to Raghavendra Technic.



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!







Credit


Created by :
Fineshop.


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



If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.



Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra Technic | All Rights Reserved



© Copyright:
raghavendratechnic.blogspot.com





~ Learning.

You may like these posts

  • Hello, Bloggers! Welcome to Raghavendra Technic.In this tutorial, we are going to show you How To Remove Date From Blogger Post URLAre you searching for how to change permalink in …
  • Hello, Bloggers!Updated on June 19, 2022In this tutorial, we are going to show you How To Remove .html Extension From Blogger Post URL?how could you remove .html extension out of y…
  • Hello, Bloggers! Welcome to Raghavendra Technic.In this tutorial, we are going to show you How to make Codebox in bloggera codebox with a nice Copy and Download Code button for Blo…
  • Hello, Bloggers! Welcome to Raghavendra Technic.In this tutorial, we are going to show you How to add Pagination in blogger Important!Before we start adding codes in XML, I will r…
  • Hello, Bloggers! Welcome to Raghavendra Technic.In this tutorial, we are going to show you How to Add Syntax Highlighter in BloggerMost of you somehow will have noticed on many of …
  • Hello, Bloggers! Welcome to Raghavendra Technic.In this tutorial, we are going to show you How To Add Heart Click Effect in BloggerThis heart effect will appear on your website whe…

Post a Comment

Bookmark