Animated loading Effect on Sidebar for Blogger

CSS3 animation is a great way to create animation in web design. In this little post we are going to discuss how to create smooth animation in your blog sidebar. How it will work? Simple! When your blog load first time or anytime your blog sidebar will animate and come from below to create a great visual effect. You can see demo of this widget before installation. You can add this great animation with any class/section of your blog. This widget is purely CSS3 ms keyframe transform there is no HTML and JavaScript.  Don’t worry about the loading time by installing this widget because it will not affect your blog loading speed. Get started to the tutorial.

Demo This Widget

How to Add this widget in Blogger

First login to your Blogger Dashboard and navigate to Template → backup your template→ click edit HTML →. Expand <b:skin>....</b:skin> if it is not expanded and Press Ctrl+F  to find ]]></b:skin>.

Now Paste the below CSS code just above/before the  ]]></b:skin>. 

CSS

@-webkit-keyframes transform-translate{
      from{-webkit-transform:translate(0px,1000px)}
      to{-webkit-transform:translate(0px,0px)}
    }
    @-moz-keyframes transform-translate{
      from{-moz-transform:translate(0px,1000px)}
      to{-moz-transform:translate(0px,0px)}
    }
    @-ms-keyframes transform-translate{
      from{-ms-transform:translate(0px,1000px)}
      to{-ms-transform:translate(0px,0px)}
    }
    @-o-keyframes transform-translate{
      from{-o-transform:translate(0px,1000px)}
      to{-o-transform:translate(0px,0px)}
    }
    @keyframes transform-translate{
      from{transform:translate(0px,1000px)}
      to{transform:translate(0px,0px)}
    }
    .sidebar {
      -webkit-animation:transform-translate 4s;
      -moz-animation:transform-translate 4s;
      -ms-animation:transform-translate 4s;
      -o-animation:transform-translate 4s;
      animation:transform-translate 4s;
    }

Configuration/Settings

You can add this animation to another element in your blog. 

To do this Change .sidebar to another element name just like .slider.

Change 4s to any other number if you want to increase or decrease the time it takes to move up completely. By default it's 4 seconds.