Add Rainbow Animation Effect to Blogger's Footer
 |
© Copyright 2024 Tecky AaryaN
|
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.
The main advantage of adding this will be that your blogger website will get a great look and visitors of your website can love the rainbow effect and it is fully responsive i.e. works properly in both mobile and computer.
So, 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 How to Add Rainbow in Blogger's Footer
Step-1: First of all you all need to visit the official website of blogger and login to your blogger website dashboard securely using your login credentials.
Step-2: Now you have to take backup of your blogger website theme, if you face any error or problem while saving code in theme editor then you can restore backup theme code and run your website normally And follow the below paths to take backup of the theme.
Blogger website dashboard -> Click on theme section-> Click on arrow icon -> Click on backup-> Click on download -> Save the downloaded file in a safe place for future use.
Step-3: Now you need to open blogger theme editor to add the codes inside it and to open it follow below provided path.
You can see the demo here⤵
Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.
Step-4: Now you need to copy below provided CSS code and paste the copied CSS code just
above closing head tag
</head> or
<!--<head/>--></head>.
<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>
<div class='stwRainbow'>
<div class='stwBlurRainbow'>
</div>
</div>
To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.
Copyright
