How to Make Any Blogger Widget/Gadget/web element Sticky (float)

Sticky widgets are widgets/gadgets in a webpage which sticks to a specific portion of the page and floats (move) with the up and down scrolling of the page.

At this post I will show you how to make a sticky widget on blogger ( this is just an example, to put on any site can be done with this method, javascript and css included)

1. Get The Widget ID.

    every blogger widget have a specific id. To get this you can go to blogger dashboard then edit a gadget to make it sticky.

2. Add Style

search for </style> add this style :

.frx_floating {background:#ffffff !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;}

3. Add this Script :

<script type='text/javascript'>
//<![CDATA[
function frx_make_sticky(element_id) {
    var v_sticky = document.getElementById(element_id);
    var v_scroll = document.createElement("div");
    v_sticky.parentNode.insertBefore(v_scroll, v_sticky);
    var width = v_sticky.offsetWidth;
    var v_Class = v_sticky.className + ' v_sticky';
    window.addEventListener('scroll', v_floating, false);
    function v_floating() {
        var rect = v_scroll.getBoundingClientRect();
        if (rect.top < 0) {
            v_sticky.className = v_Class + ' frx_floating';
            v_sticky.style.width = width + "px";
        } else {
            v_sticky.className = v_Class;
        }
    }
}
//]]>
</script>

4. Go to end of body, search for </body>
call the script :

frx_make_sticky("HTML3");

where "HTML3" is widget ID (replace it with yours)

5. Save Template. 

goto your blogger site and reload/refresh.

here is the video tutorial :