How to Install Preload Animations on Blogger Website
Website preload is a method that allows users to load important website resources before they are actually needed. This way, users can experience faster load times and a smoother browsing experience.
In an era where internet speed and accessibility are top priorities, techniques for improving website performance are increasingly becoming a focus for developers and site owners. One strategy that is increasingly popular is the use of website preload techniques.
The use of website preload allows developers to optimize the user experience by reducing the waiting time required for a web page to load.
By pre-loading resources such as images, stylesheets, and JavaScript scripts, websites can respond more quickly to user interactions and reduce reader acceleration that occurs during the loading process.
However, it is important to remember that preloading a website is not a magic solution that can be implemented without consideration. Unwise use of this technique can overload server resources and even worsen the user experience if not implemented properly. Therefore, in this article, we will explore the basic principles of website preload as well as the best practices for implementing it effectively.
It's important to understand what types of resources are suitable for preloading. Some resources, such as images and stylesheets that are used consistently throughout a website, are usually prime candidates for preloading. Meanwhile, resources that are only used on certain pages or in certain situations may not be suitable for preloading and should be considered carefully.
How to Install Blogger Website Preload
Step 1: Login to your Blogger Account
Step 2: Click the icon in the top left corner
Step 3: Select Theme
Step 4: Click the icon next to the customize button.
Step 6: Find and paste the following code just below the tag ]]></b:skin>.
/* Loading by 1sekolah - https://1sekolah.com */
#1sekolahloader{position:fixed;z-index:1800;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}.no-js #1sekolahloader,.oldie #1sekolahloader{display:none}#loader{position:relative;width:2.5em;height:2.5em;transform:rotate(165deg)}#loader{position:absolute;top:calc(50% - 1.25em);left:calc(50% - 1.25em)}#loader:after,#loader:before{content:'';position:absolute;top:50%;left:50%;display:block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-50%,-50%)}#loader:before{animation:before 2s infinite}#loader:after{animation:after 2s infinite}@keyframes before{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 after{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)}}
Step 7: Place the following code right after the tag<body>.
<!-- preload code --> <div id='1sekolahloader'> <div id='loader'/> </div> <!--preloader end code -->
Step 8: Next, place the following code right before the tag </body>
<script>
//<![CDATA[
//preloader by https://1sekolah.com
document.addEventListener('DOMContentLoaded',function(){
setTimeout(function(){
document.querySelector('#1sekolahloader').style.display ='none';
}, 3000);
});
//]]>
</script>
Change the number 3000 to change the loading duration
Step 9: Save and see the results
Conclusion
That's an easy way to install Preload animation preload on a blogger website. if you follow it correctly, it will work 100%. If you are still experiencing problems, please contact us via the contact page or comments pool. thanks for reading.
Posting Komentar