How to make any widget Sticky in Blogger

'Sticky widget' is very popular now days. Sticky widget basically use for highlight an important widget and that widget easily able to get more attention. Most of websites use sticky widget to highlight newsletter subscribe or advertisement. Usually sticky widget is a widget what sticks to top of the screen and when we scroll that webpage down the widget remains to top position. Again when scroll to top sticky widget automatically reset back to it's original position. It also known as Floating widgets.
Making a widget to stick to it's position in Blogger is very easy. It uses a simple jQuery, script code chunk. It will be done by embedding those codes it into your Blogger template and little bit configuring is necessary. Any widget you can make sticky in your Blogger. Let's see how to make any widget sticky in your Blogger blogs:

  How to make any widget sticky in Blogger

Step 1: Embedding the code

• Log in to your Blogger dashboard, select your Blog, 

• Go to 'Template' option select 'Edit Html', 

• Now find (using CTRL+F or CMD+F) into code snippet </head> tag. 

• Copy following codes and paste them above </head>

<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 2: Configure your Sticky widget

After codes embed part is done, now it's time to configure the widget which one you intended to make sticky/float. To doing that you need to find Widget Id. Every gadget/widget have one unique Widget Id.

For getting your widget Id -

• From 'Template' option select 'Edit Html' 

• Select 'Jump to widget' and you will see your current using gadget's Id (example-HTML1, HTML2, Blog1 etc)If you unable to detected your widget Id in this way then follow the alter way,

The Alter way to find Widget Id is - 

• First preview your Blog while you logged in

• The widget you want to make sticky in lower right corner of that widget you'll see a small wrench, Hover mouse pointer on wrench icon and bottom of web browser a link you will see, the link's last word contains your widget Id (see below picture)

• Then, in code chunk place your Widget Id thrice (red marked)

Caution
If your template already has the jQuery code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

installed, sticky widget will not work, so if your Template already got this code don't paste twice, without this line paste the rest!

Sticky/floating widget is very demanded subject right now. So it's your turn to make your widget's sticky in your Blogger blogs. And don't forget to mention how it working on your blog. Check out also the Sticky navigation menu for Blogger too. Cheers...