How to make Blogger Sidebar Floating

---This tutorial is about adding a floating sidebar to your blogger blog. It illustartes how you can add a floating sidebar which floats up and down when the blog page changes its position from top to bottom or bottom to top.--- Do you know you can change your sidebar to

a floating bar? This tutorial explains, how to change your existing sidebar in to floating bar. This technique can be applied to a single widget instead of whole sidebar, so that widget only floats along with scrolling. This can be achieved by adding a Javascript code to your blog. Follow these steps to add this amazing feature to your blogger blog. Step 1: You need jQuery plugin installed in your blogger blog. If you have previously added this plugin, then you may skip this step and go to next section. Log in to your Blogger Dashboard and go to Template --> Edit HTML and Proceed. Then press Ctrl+f and enter </head> to the search box. Where you get </head> tag, add the following code just above the </head> tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

Step 2: Now search for(Ctrl+f is a shortcut for searching) any one of below codes. In default templates

<div class='column-right-outer'>

Or in most of the custom blogger templates search this one(Note: If you can't find it out, your id is a different one)

<div id='sidebar-wrapper'>

Step 3: When you get the searched item, Just copy the below javascript code and paste it above the above code.

<script type="text/javascript">
        $(function() {
            var offset = $(".column-right-outer").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $(".column-right-outer").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(".column-right-outer").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

Replace .column-right-outer with your corresponding value(if you are using other templates). For custom templates, the value can be anything like sidebar-wrapper. For example, if it is id="somename", replace the code with #somename and if it is class='somename', then replace with .somename. If you want to animate any other widget, instead of the whole sidebar, find its Id or class and replace it with green colored text. Hope this helps. If you need any help, comment below. Enjoy blogging!!! :)