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>

    @-webkit-keyframes transform-translate{
    @-moz-keyframes transform-translate{
    @-ms-keyframes transform-translate{
    @-o-keyframes transform-translate{
    @keyframes transform-translate{
    .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;

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 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

thank you

4 August 2013 at 14:37

it was my mistake corrected....

Adu Alex Author
27 August 2013 at 08:32

Thanks ! very much !

Areeb Abbasi Author
12 September 2013 at 02:21

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


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 |