Welcome to It Is Unique Official! In this post, I will guide you on how to add a preloader to your Blogger website.
A preloader is a great way to enhance the user experience by displaying an animation or message while the content of your website is loading. It ensures that your users know that the website is being loaded and is not stuck. In this guide, we will show you how to add a preloader to your Blogger website.
Step-by-Step Guide to Adding a Preloader in Blogger
Important
Before making changes to your theme's XML code, it is highly recommended to create a backup of your current theme. This ensures that if any issues arise, you can easily restore the original version.
Step 1: Begin by logging into your Blogger Dashboard to access your blog settings and make necessary changes.
Step 2: In the Blogger Dashboard, navigate to and click on the "Theme" option to access your blog's theme settings.
Step 3: Click the downward arrow icon next to the "Customize" button to reveal additional theme options.
Step 4: Click on "Edit HTML," and you will be redirected to the HTML editing page where you can make changes to your theme's code.
Step 5: Now, search for the code ]]></b:skin> or /*]]>*/</style>, and paste the following CSS code just above it to apply the necessary styles.
/* Preloader By It Is Unique Official */ .preloader{position:fixed;width:100%;height:100vh;background:#0f0f0f;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 400ms ease;z-index:2000;will-change:opacity}.preloader.hide{opacity:0;pointer-events:none}.preloader .dots-container{display:flex;margin-bottom:48px;will-change:transform}.preloader .dot{width:20px;height:20px;border-radius:50%;margin:0 5px;animation:bounce 1s infinite ease-in-out}.preloader .dot.red{background:#ef476f}.preloader .dot.green{background:#06d6a0;animation-delay:.2s}.preloader .dot.yellow{background:#ffd166;animation-delay:.4s}@keyframes bounce{50%{transform:translateY(16px)}100%{transform:translateY(0)}}Step 6: Copy the following code and paste it just above the </body> tag in your HTML file.
<!--[ Preloader HTML By It Is Unique Official ]-->
<div class="preloader" aria-hidden="true"><div class="dots-container"><div class="dot red"></div><div class="dot green"></div><div class="dot yellow"></div></div><noscript><style>.preloader{display:none;}</style></noscript></div>
<!--[ Preloader HTML JavaScript By It Is Unique Official ]-->
<script>const preloader=document.querySelector(".preloader");window.addEventListener("load",()=>{setTimeout(()=>preloader.classList.add("hide"),400);});</script>Step 7: Save the changes by clicking on the save icon .
Step 8: You're all set! The changes have been successfully applied.
Additional Tips:
- Customizing the Preloader: You can modify the colors and animation speed of the dots in the CSS section to match your website’s theme.
- Make Sure Your Content Loads Quickly: A preloader should not cause delays in displaying your content. Always aim for fast page load times.
- Test for Performance: After saving, check your Blogger site to ensure the preloader is working as expected. Also, test it on multiple devices to make sure the loading experience is smooth.
Conclusion
Adding a preloader to your Blogger website can significantly improve the user experience, especially if you have large images or resources that take time to load. The steps outlined above will help you add a stylish and functional preloader that will only be visible during the loading phase of the page. Once the page has loaded, the preloader will smoothly fade out, leaving your visitors with a seamless experience.