Animated loading Effect on Sidebar for Blogger

Posted On // 4 comments


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

4 August 2013 at 11:50

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

Reply
4 August 2013 at 14:37

it was my mistake corrected....

Reply
Adu Alex Author
27 August 2013 at 08:32

Thanks ! very much !

Reply
Areeb Abbasi Author
12 September 2013 at 02:21

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

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Animated loading Effect on Sidebar for Blogger |