Add Rainbow Animation Effect in the Footer in Blogger

Hi to all, in this article I am going to tell you all about how to add rainbow animation effect in the footer in blogger website easily in just few minutes by using HTML and CSS.

Basically it will show a  sticky rainbow effect line in the footer section of your Blogger website and it will attract your website visitors and decrease your website bounce rate.

The main advantage of adding this will give your blogger website an awesome look and your website visitors may like the rainbow effect and it is fully responsive i.e. works properly in both mobile and computer.

So, read the below provided steps carefully and completely to get clear understanding about adding rainbow animation effect in the footer of blogger without any error or issue.

Steps to Add Rainbow Effect in the Footer in Blogger

Step-1: First of all you all need to visit official website of blogger and need to login to your blogger website dashboard by using your login credentials safely.

Step-2: Now you nee to backup your blogger website theme, if you get any error or issue while saving the code in theme editor then you can restore backup theme code and can run your website as usual and to backup theme follow below paths.

Step-3: Now you need to open blogger theme editor to add the codes inside it and to open it follow below provided path.

Step-4: Now you need to 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-5: Now copy below provided HTML code and paste the copied HTML code just above closing footer tag or </footer> tag.

<div class='stwRainbow'>
  <div class='stwBlurRainbow'>
  </div>
</div>

Step-6: Now after adding the two inside the theme editor, click on save button to save the theme.

Note:

If you get any error or issue while saving the code inside theme editor then you need to restore your backup code again and need to repeat the same process as mentioned in above steps carefully.

If you want to change the style and colors, then you need to modify above provided CSS code.

And for changing colors you need to replace color codes in CSS and for color codes you can use google color picker or any other third party color picker websites.

Add the codes carefully inside the correct place, if you paste in any other place then the code will not work so add in the correct place as mentioned in above steps.

Conclusion

I hope that you have understood about adding rainbow animation effect in the footer in blogger website easily in just few minutes by using HTML, CSS and JavaScript.

And if you get any doubts related to this article then contact us through contact us page and share this article to your friends and Thanks for visiting our website.