Hello! Welcome to Tech Ankur.

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

What is Rainbow Animation?

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 reduce the bounce rate of your website.

What is the benefit of adding this?

The main advantage of adding this will be that your blogger website will get a great look and visitors of your website will love the rainbow effect and it is fully responsive i.e. works properly in both mobile and computer.

How to add rainbow animation effect?

read the below steps carefully and completely to get a clear understanding of how to add rainbow animation effect to footer of blogger without any error or problem.

Steps to Add Rainbow in Blogger's Footer

Step-1: First of all you need to visit the official website of Blogger and securely log in to your Blogger website dashboard using your login credentials.

Step-2: Now you have to backup your blogger website theme, if you face any error or problem while saving the code in theme editor then you can restore the backup theme code and run your website normally And follow the paths given below to backup the topic.

Blogger website dashboard -> Click on theme section-> Click on arrow icon -> Click on backup-> Click on download -> Verification of captcha -> Save the downloaded file in a safe place for future use.

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

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Step-4: Now you have to copy the CSS code given below and paste the copied CSS code just above the closing </head> tag.

<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 encounter any errors or issues while saving the code inside the theme editor, you will need to restore your backup code and carefully repeat the process described in the above steps.

If you want to change the style and color, you have to modify the above css code,and for changing color you need to change color code in css and for color code you can use google color picker or any other third party color picker website.

Carefully add the code at the right place, if you paste at any other place the code will not work, so add the code at the right place as mentioned in above steps.