Add Rainbow Animation in Blogger's Website Footer

 Hello! Welcome to ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ

Rainbow Animation in Blogger's Website Footer

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.

You can see the demo here⤵

   View Demo

Step 1 First of all Login to your Blogger Dashboard.

Step 2 Now Click on Themes.

Step 3 Now Click Dropdown Button & open EDIT HTML

Step 4 Now you copy below provided CSS code and paste the copied CSS code just above closing head tag </head> or &lt;!--<head/>--&gt;&lt;/head&gt;

<style>

.stwRainbow,.stwBlurRainbow{position:fixed;width:100%;bottom:0;left:0;right:0;height:3px;z-index:23;background:linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132,#4086F4, #31A952, #FBBE01, #EB4132);background-size:200%;-webkit-animation:animeBar 5s linear infinite;animation:animeBar 5s linear infinite}.stwBlurRainbow{height:10px;z-index:22;filter:blur(10px);opacity:.7}@-webkit-keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}</style>

Step 4: Now copy below provided HTML code and paste the above closing footer tag </footer>

<div class='stwRainbow'>

  <div class='stwBlurRainbow'>

  </div>

</div>

Conclusion

This is all about adding the Copy Pre Content to Blogger Website. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!

Copyright ©
ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ