Buy Plus UI v2.6! Demo Buy Now!

How to Add Rainbow Animation like effect on Footer of Template

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

 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.

How to Add Rainbow Animation like effect on Footer of Template

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'>
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 😊.


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.

Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee

Post a Comment

Please do not spam in the comment section or your comment will not be approved.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.