How to Create Rainbow Animation Line Effect on Blogger
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%}}
<!--[ 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.