How to Add Rainbow Animation like effect on Footer of Template

 Hello Blogger's how are you. I hope you are doing great. So today we are going to see the demonstration about How to add Rainbow Effect Animation on Footer of Template or Theme.

This animation sometimes also called by Google Assistant effect or 🌈 Rainbow Effect or Neon Effect.

Here you have to add just two codes in your theme and I don't think 🤔 it will effect your Blogger's website.

So without wasting the time let's start the tutorial. I hope you will find it very interesting beacuse it just give the website an awesome 😎 look. Your visitors may ask you about how to apply this effect.

Adding Rainbow Effect Steps :

Below are the given two steps kindly follow it properly.

Alert : Kindly backup your theme before proceeding for this step for any kind of error and easy restoration.

Step 1

1. Open your blogger account.
2. Go to Theme section.
3. Click on edit HTML.
4. Now search for this </b:skin> tag on your theme.
5. Now copy the below CSS and paste it just above/ahead of </b:skin> tag.

/* Bottom Bar Animation by Tech With Deo */ .animeTWD,.animeBlurTWD{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}.animeBlurTWD{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%}}

Some informations :

1. If you want to change the color.
2. Change the marked code #4086F4, #31A952, #FBBE01, #EB4132,#4086F4, #31A952, #FBBE01, #EB4132.
3. And change 5s for animation of moving colors.

Step 2

1. Now after completing above steps.
2. Search for the </footer> tag.
3. Now copy the below given HTML code just paste it just above the </footer> tag.

<!--[ Bottom Bar Animation by Tech With Deo ]-->
<div class='animeTWD'>
  <div class='animeBlurTWD'>
  </div>
</div>

Now at Last don't forgot to save the theme.

Now after completing the above steps I hope you have successfully added the rainbow effect on your theme. Do like and follow our blog for more interesting tips and tricks 😊.

Demo

Conclusion

So in this post we have discussed about how to add rainbow animation like effect on footer of the template or theme. If you have any query kindly comment below and do like this post.

Go to Link