Join our Telegram and Youtube Channels

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%}} 
    
  • Now complete the Above Steps. Next, Find the </footer> Tag.
  • 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>
  • Now your Animation Line Effect is Ready to Use.

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.

Related Posts

Post a Comment

Table of Contents