How To Hide Powered by Blogger Footer Attribution from Your Blog

If you are looking for how to add a Preload Animation On Blogger website then this post is just for you.

© Copyright 2024 Tecky AaryaN

We only used then HTML, CSS and JS. Are you upset about your website speed? do not worry it doesn't affect your website speed.

Also do not worry about it this Accordion Section also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.

Should you add a Preload Animation to Blogger website?

As I would see it, I will tell yes you need to add a perusing Preload Animation in your Blogger site on the grounds that your site guests will consider this like a difficult model: to peruse the article totally and the advancement bar will assist with perusing the article totally for guests and your site impressions increments.

How it works?

The Preloading vitality will show till the runner fully load also it'll show the website main content is also responsive.

So without wasting important time let's check How to Add a Preload Animation to Blogger?

How to Add a Preload Animation 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> or /*]]>*/</style> and paste the following CSS Codes just above to it. 

/* Preloader by Tecky AaryaN */ .pldW{position:fixed;top:0;left:0;bottom:0;right:0;z-index:990;display:flex;background:rgba(255, 255, 255, 0.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:center;align-items:center} .pldW.flat{background:#fffdfc} .pldW.fadeOut{animation:loadFadeOut 1s backwards} .pldW.hidden{display:none} .pldW .crcl{width:70px;position:relative;display:flex;flex-wrap:wrap;margin-bottom:-15px;justify-content:center;align-items:center} .crcl .r, .crcl .g, .crcl .y, .crcl .b{position:relative;width:10px;height:10px;border-radius:10px;margin:2px} .crcl .r{background-color:#ea4335;animation:movingUp 0.5s infinite alternate} .crcl .b{background-color:#4285f4;animation:movingUp 0.5s 0.2s infinite alternate} .crcl .g{background-color:#34a853;animation:movingUp 0.5s .5s infinite alternate} .crcl .y{background-color:#fbbc05;animation:movingUp 0.5s .7s infinite alternate} 

.drK .pldW{background:rgba(0, 0, 0, 0.1)} .drK .pldW.flat{background:#1e1e1e} @keyframes loadFadeOut{from{opacity:1} to{opacity:0}} @keyframes movingUp{from{top:0px} to{top:-15px}}

Don't forget to change .drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!

Step 6: Then find the code </body> and paste the following CSS Codes just above to it.

<b:if cond='data:view.isSinglePost'></b:if>

<!--[ Preloader by Tecky AaryaN, Add class name 'flat' to 'blur' for blur background  ]-->

  <div class='pldW flat'>

    <div class='crcl'>

      <div class='r'></div>

      <div class='b'></div>

      <div class='g'></div>

      <div class='y'></div>

    </div>

  </div>

  <script>

    /*<![CDATA[*/

    document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { document.querySelector('.pldW').classList.add('fadeOut') }, 2000);

      setTimeout(function() { document.querySelector('.pldW').classList.add('hidden') }, 2850) }); /*]]>*/

  </script>

Step 7: Save or Publish the html changes by clicking on this icon.

 

To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.

Copyright

TeckyAaryaN

Go to Link