Make any Blogger' widget sticky

Hey fellas! If you do blogging, then you must know to customize your template: How make any widget sticky? You should already know about Widget. Just Start here. I's always interested in finding a trick like that...

Procedure:

1# First You should know the Widget's ID, the  simplest way to do it is:

• Open Widget to edit it. This edit button is shown right at down-right corner. Click it to open the edit-widget.
• Now there will be a new opened window of your browser [may be different].
• Just in the address bar, at the end, see the Widget's ID. Normally it is HTML1, HTML2 and so on. [See screenshot below]
  

2#  Now, Go to Template>Edit HTML.
3# Press Ctrl+F to find something [you must choose the template-edit box by clicking it, first]. Write something like:
</body>
Hit Enter to find the above piece.
4# Now, just above it. Copy and paste the following text:

<script>
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

5# Just replace YOUR_WIDGET_ID with your original ID [like HTML1, HTML2....] [See Screenshot Below]

6# Now, your widget will be stick to the scroll, and will move with the scroll....Enjoy and don't forget to share.