Make Blogger Sidebar Fixed (Sticky) That Scrolls with You

You can arrange your blogger sidebar in several ways. Here I will show you some way of displaying sidebar as like fixed, sticky, animating. So lets see some example!

1. Fixed Sidebar– with only CSS [See Example]
2. jQuery Sticky Sidebar that Scrolls with Visitor! [See Example]
3. jQuery Sticky Widget (only a specific widget will be Scroll ) [This page is a example!, Sticky Widget is almost same as Sticky Sidebar, there whole sidebar stick around and here only a single widget stay sticky.]

1. Let's see, how to make Blogger Sidebar Fixed with only CSS

Follow the instruction below: 

• Go to your blogger blog Dashboard > Template > Edit HTML 
• Search (CTRL + F)  for the following code:

]]></b:skin>

• And just before ]]></b:skin> paste the CSS code below:

.column-right-inner { position: fixed; }

• Save Template. We're Done!

Note: .column-right-inner is the right sidebar class. If you want to make Fised a left sidebar then replace it with .column-left-inner

2. Let's see, how to make Sidebar Sticky+Animating with jQuery

Follow the instruction below: 

• Go to your blogger blog Dashboard > Template > Edit HTML 
• Search (CTRL + F)  for the following code:

</body>

• And just before </body> paste the following jQuery code:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript">
        $(function() {
            var offset = $(".column-right-inner").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $(".column-right-inner").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(".column-right-inner").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

• Save Template. We're Done!

Note: .column-right-inner is the right sidebar class. If you want to make sticky a left sidebar then replace all those class with .column-left-inner from the jQuery code.
And topPadding = 15; change the value if you need to increase/decrease space on top of the sidebar.

3. Let's see, how to make a Widget Sticky with jQuery

For example, you could make an AdSense Ads widget stycky which stick around with visitors.

Well to do so, Follow the instruction below:

• At first find-out your widget ID (ex. HTML7)
• Go to your blogger blog Dashboard > Template > Edit HTML 
• Search (CTRL + F)  for the following code:

</body>

• And just before </body> paste the following jQuery code:

<script src='http://resources.infolinks.com/js/infolinks_main.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>
    <script type='text/javascript'>
        $(function() {
            var offset = $(&quot;#HTML7&quot;).offset();
            var topPadding = 35;
            $(window).scroll(function() {
                if ($(window).scrollTop() &gt; offset.top) {
                    $(&quot;#HTML7&quot;).stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(&quot;#HTML7&quot;).stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

Note: Replace #HTML7 With Your Widget ID

• Save Template. We're Done!

Don't forget to say thanks. Do you want to know anything else about this ? Don't hesitate to ask.