Hello Dudes, Welcome to Our Pixabin Official Blog. Let's we are going to
see how to create rainbow Animation line on the blogger website. this effect
gives a professional footer area Designer Look.
What is Rainbow fall effect?
This Rainbow Line Effect is Showed on your blog Footer Area. And, its Animated Multi coloured animation on your blog footer. show this script gives professional look design to your blog. if you want add this script on your blog footer please follow the below steps.
Steps to add Rainbow Animation line effect on footer Area in Blogger
- Go to Blogger Dashboard
- Open "Theme" Section on blogger
Next, Find the "Edit Html" Option and Select the "Edit Html" Option.
- Now Find </b:skin> Tag on blogger Template.
- Copy the below CSS and Paste Above on </b:skin> Tag.
/* Bottom Bar Animation by Pixabin.com */
.PixabinTWD,.PixabinBlurTWD{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:PixabinBar 5s linear infinite;animation:PixabinBar 5s linear infinite}.PixabinBlurTWD{height:10px;z-index:22;filter:blur(10px);opacity:.7}@-webkit-keyframes PixabinBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes PixabinBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
Next, Copy the Below Html Script and Paste it Above on </footer>
Tag.
<!--[ Bottom Bar Animation by Pixabin.com ]-->
<div class='PixabinTWD'>
<div class='PixabinBlurTWD'>
</div>
</div>Custom Modifications
- No Need Any Modification
Video Guide
Final Word
If you like this "How to Create Rainbow Animation Line Effect on Blogger" Script and If you want to more information like this Article. Please follow our blog on Google News And Telegram. and One More Thing Subscribe My Youtube Channel.