How to make any widget sticky???

When your visitor scroll down to see your content.The upper portion of page goes behind the page.Now here is a short tutorial to make any widget sticky that it show every time when scrolling sown the page. It will float until its original position is come back.
it is very useful to make attention of visitor to that widget.this is very important for any top navigation menu,facebook like box,any other social media widget and subscription box.This widget is applicable to all that have widget "ID" regardless of their position or location in blog.

 

-->

 How install in Blogger??

• Login in our blogger Account
• Dashboard>>Template>>Edit template
• Now search the following tag.

</body>

• Paste the Below Code above this Tag.

<script>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04

//how-to-make-any-widget-sticky.html 

 // Free to use or share, but please keep this notice intact.
//<![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> 

• Get id of your widget or element you want to sticky enter in highlighted 

area and replacing "your-widget-id"

• Lets say widget id is navbar or HTML9 place this code in highlighted area.

• Task complete and preview.

  Style:

  You can change you style according to your choice.change you background,shadow,font

  etc.In the end of the code you can see the <style> tag.I highlighted it with blue color.

  Just you change it.That,s It

  From Writers Desk:

   This tutorial is very useful to attract visitors to that widget or element.Widget regard is

  going to Blogger Sentral .I like it very much that's why i share it with you.you can see it

  on blog i applied it.incase of any problem please free to comment below.your comment is

  valuable for us.

  Thanks for visiting and happy Blogging.