How To Make Any Widget/Gadget Sticky In Blogger

In this tutorial i'm going to explain how to make any widget/gadget stick on your blog thus making the widget visible at all time while the visitor scrolls.It will float there until its original location comes back when the page is scrolled back up.

This Sticky trick is for any widget/Gadget or element that has an ID.Perfect for navigation bar,Email subscription box & social media profile sharing buttons.

How to add any widget/gadget sticky in your blog/website:

(Method 1)

1. Login to your blogger account and go >>template>>edit template

2. Now click anywhere in your code area and find using ctrl+f </body> 

3. Now Paste below Code Just Above </body>

<script>
// Sticky widget by BloggersStand.blogspot.com
//<![CDATA[
bs_makeSticky("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> 

Note:How to get to know your widget id,just look below example for widget id.

Customization:

• To Change Background Color,Replace f2f2f2 with Your Hex Color Code.
• Replace WIDGET_ID with your widget id.

Save your template..Done !

(Method 2)

1.Log in to your blogger account and go to >> layout >>Add A Gadget>>HTML/JAVASCRIPT

2.Paste below code Just in your Html/javascript gadget box.

<script>
// Sticky widget by BloggersStand.blogspot.com
//<![CDATA[
bs_makeSticky("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> 

Customization:

• Replace WIDGET_ID with your widget id to make sticky.
• To change background replace f2f2f2 with your Hex color code.

Save your Template,Done !!