Add Rainbow effect in the footer in Blogger

 

Hello Guys! Welcome to Themes away in this article we are going to show you how to add the rainbow effect in the footer in Blogger. So let's start.

Advantages

It will give your Blogger website an awesome look. And your visitors may like this rainbow effect. It will work on both desktop and mobile devices.

How it works?

It will show a  sticky rainbow (RGB) effect line in the footer of your Blogger website.

Which codes are used?

These codes used HTML and CSS codes.

How to add?

•     First, go to Blogger
•     Then click on the Theme option
•     Then you can see a down arrow near customize click on that
•     Then click on Edit HTML
•     Then press CTRL+F and find </head> or &lt;!--<head/>--&gt;&lt;/head&gt;
  

First copy this CSS and paste above </head> or &lt;!--<head/>--&gt;&lt;/head&gt;es.

<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>>

Then find  </footer> and paste this code below </footer>

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

Then Save your template.