Animated loading Effect on Sidebar for Blogger



Today I am am going to show how you can add animated transformation effect on the sidebar or any element of your blog using CSS3. Once you have configured the code the element/Sidebar will move upwards emerging from the bottom and get fixed at its real position.

No demo is required for this as you can see the same effect on our blog's sidebar. In case you were on another tab while loading this page, refresh it to see the effect again.

This CSS3 transformation effect makes your blog look more cool and eye-catching. Below is the tutorial on how you can add this design hack to your blogger blog.



Configuring this effect


Firstly go to Blog Title → Template → Edit HTML. Press Ctrl + F. Expand <b:skin>....</b:skin> if it is not expanded. Type ]]></b:skin> in search box and press enter key. [As per the new HTML editor]
Add the below given code just below ]]></b:skin>

<style>
    @-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;
    }
    </style>

Change .sidebar to another elements name in order to add this effect to any other element. Change 4s to any other number if you want to increase or decrease the time it takes to move up completely. By default its 4 seconds.

Save the template. You are done now. You and your visitors can now see this amazing effect on your sidebar or the element you want.

4 comments:

  1. is very interesting but at the top of my page after this symbol

    -->

    You can see it in my demo site

    http://lovetechtest.blogspot.gr/

    thank you

    ReplyDelete
  2. Thanks ! very much !

    ReplyDelete
  3. hy nice post. I want You may also like - like yours. Please help me.

    ReplyDelete