Add Rainbow Animation in Blogger's Website Footer

 Hello! Welcome to Tecky AaryaN. 

You are looking for Add Rainbow Animation in Blogger's Website Footer then this post is just for you.

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 Go to Blogger Dashboard.

Step 1 Now Click on Themes.

Step 2 Now Click Dropdown Button & open EDIT HTML

Step 3: 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

I hope you have successfully added your safelink. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: 

Tecky AaryaN

Go to Link

About the Author

Student | Developer | Blogger

#Animation #Blogger #HTML