Make Blogger Sidebar Fixed Sticky That Scrolls with Menu

Make Blogger Sidebar Fixed (Sticky) That Scrolls with Menu!

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. 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 j Query

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

Look at the right sidebar of this page and scroll down, a AdSense ads widget is scrolling with you. Thats what I'm going to showing you the code for.

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

TONEYSOFT