You may saw this on many popular websites like Apple and Facebook and bunch of other websites and it's not that hard to get this on your blog.It's a jquery effect so make sure that your blog contain jquery script so if it does then you can skip our first and second step.
Installing :
- Go To Blogger > Template > Edit HTML > Search for </head>
- Just above </head> paste following jquery script
<script type='text/javascript' src="http://widcraft.googlecode.com/svn/jquery.js'></script>
- Then search any one of below codes. In custom blogger templates
<div id='rsidebar-wrapper'>
- Or in default templates
<div class='column-right-outer'>
- Or whatever your sidebar is just comment and i'll help you to find it Just copy the below code and paste it above the above code.
<script type="text/javascript">
$(function() {
var offset = $("#rsidebar-wrapper").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#rsidebar-wrapper").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#rsidebar-wrapper").stop().animate({
marginTop: 0
});
};
});
});
</script>
Customizing :
- Replace the red colored text with the corresponding value.
- If you want to animate any other widget, find its class used for CSS and replace it with green colored text. If you have any doubt, let me know.
Comment for any type of help.....
