Tutorial: How to make sticky sidebar widget in blogger/blogspot?

We have great collection of amazing looking video theme, You can download any theme you like for free. By using these themes, your blog is with an extraordinary feel of professionalism and style. Meanwhile continue reading Tutorial: How to make sticky sidebar widget in blogger/blogspot? .

Read Also!

Blogger widgets play a vital role for your blog. Widgets are most frequently used to customize blog sidebars. Each widget represents an area of content, which bloggers can populate with ads, text, links, images, and more. This tutorials will give you the idea on how to make sticky or fix sidebar widget in your blog purposely to emphasize the content of your widget or any other purpose it may serve depending on you.

Demo, you can see Popular post of this Blog.

Let us begin with the tutorial, simply follow the steps below:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.

Step #2: Click Template --> Edit HTML.

Step #3: Find </head>  by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before </head> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var ks_widget_top = $('#widget Id').offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop();
        if (ks_current_top > ks_widget_top) {
          $('#widget Id').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
        } else {
            $('#widget Id').css({ 'position': 'relative' });
        } 
    };
    ks_sticky_widgets();
      $(window).scroll(function() {
         ks_sticky_widgets();
    });
});</script>

Step #5: Change the widget ID of your widget that you want to make sticky and Save your template.

How to find widget ID?

Widget ID is unique ID of each of your widget. How to find widget ID, simply go to your DASHBOARD select LAYOUT then click EDIT on the widget then you can see on widget ID.
Refer of the screenshot below:

That's it for this tutorial. Happy Blogging!