You Are Here : Home » , , » How to Add Animated Loading Effect to Sidebar on Blogger

How to Add Animated Loading Effect to Sidebar on Blogger

Hey! Peoples. In my previous animation effect for Blogger I showed you How to add Animated Page Loading Effect to Blogger. In this post I will show you how to add animated loading effect to Blogger sidebar. It's a very cool and easy effect. The effects is based on CSS3. I tried to make this effect supported on almost all browsers. I will show you two types of animation effect for Blogger sidebar. Both the effects is completely different from each other. Choose the one which will best fit on your Blog.

How to Add Animated Loading Effect to Sidebar on Blogger

In the first effect sidebar will come from bottom to its specified place. This animated loading effect for Blogger sidebar is based on CSS3 ms keyframe transform which makes the effect look awesome. It will create a little visual effects on your Blog. Let's see how to add this animated loading on Blogger blogs.
First of all I would like to remind you to make a backup of your Template. After making Backup of your Template follow the very easy steps given below.
  • First things first, go to Blogger Home and Sign in with your Blogger/Google Account if you haven't signed in till now.
  • After that click on the Blog title in which you want to add this animated loading effect on sidebar.
  • Now, in the Dashboard click on Template.
  • In the Templates page click on Edit HTML which is located below the preview of your Blogger blog.
  • In the HTML page of your Template search for the code given below.
]]></b:skin>
You can search this code by pressing CTRL+F. Before pressing CTRL+F click anywhere in the HTML code area. After that type "]]></b:skin>" on the search box without quotes and hit enter button.
  • After finding the above code you have to add the CSS code given below just above/before "]]></b:skin>".
@-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;
    }
  • After adding the above CSS code in the proper place you can Save Template.
Want to see a demo of this cool effects on sidebar than reload this page. Actually I have added this effect on my blogs' sidebar on this page. If you haven't seen this effect when you visit this page than reload this page to load this animated loading effect on the sidebar.

Customizations
  1. You can change the .sidebar in line 21 with the name of other element in which you want to apply this effect. By default it will be applied to the sidebar.
  2. See 4s in lines 22 to 26. If you want to change the time the sidebar will take to come from bottom to top than change 4s with your preferred time period.
That's all for this CSS animated loading effect for Blogger sidebar. Go to your Blog and see how this new effect looks in your Blog. As I said above I will provide you two types of effect for your Blogger blog. Check out the procedure and description below to add the second type of effect on your Blogger blog Sidebar.

In this effect you will change the design of your Blogger sidebar. The change will take effect on the border of your sidebar. We will actually create a animated effect on the border of your Blogger blog sidebar. This effect for animated loading effect on sidebar is also based on CSS3. And I tried to make this effect supported on all types of browser including the browser which doesn't support CSS3. It's time to see how to add this animation effect on your blog.
I will assume that you have kept a Backup of your Blogger template. If not make a backup now. It will help you if by chance you destroy your Template.
  • Now sign in to Blogger if you haven't signed in until now.
  • After that click on the blog on which you want to add this animation effect.
  • Now after that click on Template which is located on the Dashboard.
  • In the Template page of your Blogger blog click on the Edit HTML which is located just below the live preview of your Blog.
  • In the HTML page of your Blog click anywhere and search for the code given bellow.
]]></b:skin>
Tip: You can search this code by pressing CTRL+F. After pressing CTRL+F type the code listed above and press enter button of your Keyboard.
  • After finding "]]></b:skin>" add the following lines of codes. Add the code given below just above or before the "]]></b:skin>" tag.
.sidebar .widget {
border: 7px outset #292832; padding: 15px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s ease;
background-color:none;
}
.sidebar .widget:hover {
border: 7px outset #642880; padding: 15px;
}
  • After adding the above code in the specified place Save the Template.
  • That's it! Go and see this animation effect on your Blogger blog. I am sure you will like it.
Customizations on this effect
  1. Change #292832 in line 2 with your preferred border color.
  2. You can change #642880 in line 11 with the color of your choice which will appear on hover.
These were the two animated loading effect for sidebar of Blogger. With the help of CSS we can add any type of effects as we want. I hope you like these effects for Blogger blog. If you faced any problem in adding this effect on Blogger blog than feel free to drop a comment below.

Ads by Google
If you enjoyed reading this article then please leave a comment or subscribe to our newsletter to get all the future posts delivered to your feed reader or you email desk.

No comments:

Leave a Reply

Welcome to SpicyTweaks.

Copyright © 2013-17 SpicyTweaks. All Rights Reserved.

Scroll to top